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设置为stretch的默认值以外的值，例如align-items: flex-start。