0

我不知道从哪里开始：

我正在寻找一种在照片线上自定义编辑宽度/高度的方法，与此处http://www.flickr.com/search/?q=flowers 几乎完全相同。在 flickR 上，每行照片具有相同的宽度，并且该行的每张照片具有相同的高度。这样它就可以很好地排列。

在我的页面上，我使用 php 随机选择 2 或 3 张图像以显示在一行中，我将其设置为宽度是固定大小（2 张图像在 50% 或 3 张在 33% 女巫等）但这意味着高度是在图像之间关闭。整洁的解决方案是一个脚本，我猜它查看图像的高度和宽度并计算出它们的大小，以便调整宽度和高度以匹配并保持整齐的线条。

有谁知道从哪里开始？谢谢

4

3 回答 3

4

通常我会将图像放在一个元素中，即

<div class='item_image'><img src='image.jpg'></div>

然后，您可以按如下方式设置 css：

div.item_image { width: 100px; height: 75px; overflow-y: hidden; }
div.item_image img { width: 100%; }

您还可以使用 php 适当地调整图像大小和/或创建适合您需要的缩略图大小。确实有很多选择。

于 2013-09-12T23:48:17.087 回答
1

也许您可以从查看此博客文章开始：

http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery

于 2013-09-12T23:53:35.557 回答
0

您可以将图像设置为background-image，然后使用该background-size: cover属性填充包含的元素。只需设置每个图像容器的特定宽度和高度，然后background-size: cover将用图像填充容器。

更多信息在这里：http ://css-tricks.com/perfect-full-page-background-image/

标记

<div class="imageOne" style="background-image: url('x');"> </div>

CSS

.imageOne {
    background-size: cover;
}
于 2013-09-13T00:05:44.790 回答