响应式投资组合图库图像调整大小

Question

我正在使用WordPress制作响应式投资组合网站。我有一个小问题，打破了布局。所有图像均为300px宽，200px高。 如果用户上传的图像大于上述尺寸，我还使用WordPress API剪裁图像

add_image_size( "portfolio", 300, 200, true );

这对我有用的是它会自动将width="300"和height="200"属性插入到图像中（但图像的原始尺寸保持不变，只是调整大小）这很有效当我尝试调整浏览器窗口的大小时..

这是一个senario：客户端上传尺寸为300px宽和210px高的图像..最初它正在调整大小并显示因此布局是完美的但是当我调整浏览器大小时，图像也会调整大小但是相对于它的“原始尺寸”..因此原始高度为210px的图像比其他图像大..并且当我浮动所有图像以形成3列布局时，高度差异打破了布局（移动右边的这个大图像下方的列，并在其下方留下一个空列。）

如何解决此问题？我想过使用timthumb在显示之前调整所有图像的大小..因此在运行中改变图像的原始尺寸但我觉得这不是一种有效的方法吗？这个问题的任何其他解决方案？此外，我不想使用像jQuery Masonry这样的东西，因为我有一个特定的布局来维护。

由于

Answer 1

您可以使用css中的max-height规则来平等地限制所有图像的高度。

例如：

.gallery img{
  max-height: (some height);
}

使用％或em作为高度，在响应式设计中像素可能无法正常工作。