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

Question

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

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

这对我来说是它自动将width="300" 和height="200" 属性插入图像（但图像的原始尺寸保持不变，它们只是被调整大小）这很好用，除非我尝试调整我的浏览器窗口大小..

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

我该如何解决这个问题？我想在显示之前使用 timthumb 来调整所有图像的大小。因此可以即时更改图像的原始尺寸，但我认为这不是一种有效的方法？这个问题的任何其他解决方案？我也不想使用像 jQuery Masonry 这样的东西，因为我有一个特定的布局需要维护。

谢谢

Answer 1

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

例如：

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

使用 % 或 em 作为高度，像素在响应式设计中可能效果不佳。