为什么 Chrome 中的图片宽度不超过 500 像素？答案

【问题标题】：Why are the images no wider than 500px in Chrome?为什么 Chrome 中的图片宽度不超过 500 像素？
【发布时间】：2012-03-27 17:50:46
【问题描述】：

使用常规的、相当宽的 Google Chrome 浏览器，请参阅 http://abmphotography.beta.cjbm.net/aileen-kevin

图像的高度在 CSS 中定义，但宽度应该是自动的。它似乎适用于纵向图像，但横向图像的最大宽度限制为 500 像素。

谁能解释一下？

【问题讨论】：

【解决方案1】：

Colin，您在两个选择器上将 max-width 设置为 100%：

img
.thumbnail > img

这会使图像与容器一样大，因此不允许您寻求扩展。禁用 Chrome 上的 max-width 属性会使图像符合您的预期，就像在其他浏览器上一样。

【讨论】：

谢谢 - 就是这样。由于某种原因，我现在无法覆盖它（无法直接编辑它，因为它来自 Bootstrap CSS），但这是另一个问题。
啊，我不能用 'auto' 覆盖设定值，但我可以将它设置为 10000% 来完成这项工作。
你也可以设置为'max-width: none !important;'如果它妨碍你。
Bootsrap 使用span1-span12 控制缩略图宽度：twitter.github.com/bootstrap/components.html#thumbnails
Nathan - !important 不理想，因为我需要在其他地方再次覆盖它（查看何时缩小浏览器视图）。

【解决方案2】：

要获得与其他浏览器一样的正确输出，您必须从 css 中删除 max-width，见下文。我已经从下面的 css 中删除了 max-width:100%;。

.thumbnail > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

【讨论】：