css - Chrome 的 img 高度和最大宽度问题

Question

在此page ，视频缩略图的列似乎在 Chrome 上显示不一致(均等)。在 IE 和 FF 上，两个列宽均等显示。

我的图像全局 CSS 已设置为:

img {
height: auto;
max-width: 100%;
}

改变任何值都会影响其他图像渲染。有什么想法吗？

Answer 1

问题是您实际上并没有设置宽度，这意味着浏览器和图像可以以他们想要的任何方式呈现，如您所见，产生不可预测的结果。

最简单的解决方案是将列的大小调整为固定的 50% 宽度，如下所示:

.page-videos .view-video td {
    width: 50%;
}

将 max-width: 100% 保留在原位，这将确保即使是大图像也能完美地适应这 50%。

请随意替换我的示例代码中的类，它们只是确保我们只更改此一张表的最佳猜测，但您可能知道该元素的更好/更具体的类。