Chrome 正在拉伸我的最大宽度图像的高度答案

【问题标题】：Chrome is stretching the height of my max-width imageChrome 正在拉伸我的最大宽度图像的高度
【发布时间】：2012-04-04 19:14:12
【问题描述】：

我无法在我正在使用的 CMS 中设置图像的最大宽度。在 Chrome 中（尚未在其他浏览器中测试），设置最大宽度会拉伸我插入的图像的高度 - 请参见此处：http://www.literarykitchen.co.uk/events/testspace/

这是我正在使用的代码：

#content .pagebanner img { max-width:490px; }

有什么理由让它这样伸展吗？我认为 maxwidth 意味着图像按比例缩放？

谢谢

奥苏

【问题讨论】：

通过反复试验找到了答案 - 您需要将高度设置为“自动”：#content .pagebanner img { max-width:490px; height:auto; }
这个解决方案在 Chrome 中对我不起作用。 :(
@mcandre 奇数；它对我有用。 Chrome 22.0.1..等....

【解决方案1】：

我遇到了同样的问题，我的图片库是动态的，所有图片都是用户上传的不同尺寸。所以我必须确保这有效。为我解决的问题是设置 max-width: 、 max-height: 、 height: 和 width: 否则它对我不起作用。

示例：

#image-container-div img {
    max-width: 490px;
    max-height: 490px;
    height: auto;
    width: auto;
}

【讨论】：

感谢您的回答，因为它在一些地方有所帮助。在准备好我们的网站 Mobilegeddon 时，我发现将上面的宽度设置调整为 100% 可以为我提供所有解决方案中最好的：#image-container-div img { max-width: 490px; max-height: 490px; height: auto; width: 100%; }

【解决方案2】：

对于那些在父元素上使用display: flex 时遇到此问题的人，您的问题可能是您需要将父元素上的align-items 设置为默认值stretch 以外的其他值，例如align-items: flex-start.

【讨论】：