Chrome 的 img 高度和最大宽度问题答案

【问题标题】：img height and max-width issue with ChromeChrome 的 img 高度和最大宽度问题
【发布时间】：2014-09-26 03:06:15
【问题描述】：

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

我的图片全局 CSS 已设置为：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

删除max-width 全局修复它，或者改用min-width 覆盖它。 max-width 仅设置允许的最大宽度，而不是实际宽度

.cboxElement img {
    height: auto;
    min-width: 100%;
}

【讨论】：