随机高度为 100% 的 Chrome 图像不会保持宽高比并拉伸图像。

Question

这个问题很容易解释...我有一个高度为 90% 的容器div 和一个高度为 100% 的包含图像来填充其容器。这是简单的 css：

.carousel-item .img {
    height: 90%;
    text-align: center;
}
.carousel-item .img img {
    height: 100%;
    max-height: 384px;
    max-width: 497px;
}

问题是只有 Chrome 随机（但大多数时候都会发生）拉伸宽度图像，就像我将 width 属性设置为 100% 一样，但我没有这样做，因为我想保持它的纵横比。我想知道这是否是Chrome错误，或者有一个解决方法。我链接了两个屏幕截图：

• http://oi61.tinypic.com/ehxlbm.jpg <---原样。
• http://oi62.tinypic.com/2qcl8gl.jpg <---是。

感谢您的帮助。

Answer 1

.carousel-item .img img {
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: 497px;
}