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

Question

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

这是我正在使用的代码：

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

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

由于

大须

Answer 1

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

示例：

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

Answer 2

对于那些在父元素上使用display: flex有此问题的人，您的问题可能是您需要将父元素上的align-items设置为默认值{{1}以外的值}，例如stretch。