0

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

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

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

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

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

谢谢

4

1 回答 1

0

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

例如：

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

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

于 2013-03-21T13:16:14.807 回答