Question

我不知道从哪里开始：

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

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

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

Answer 1

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

<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来适当调整图像大小和/或创建适合您需要的缩略图大小。真的有很多选项。

Answer 2

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

Answer 3

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

<强>标记

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

<强> CSS

.imageOne {
    background-size: cover;
}