html - 高度为 100% 图像的 Chrome 随机不保持纵横比并拉伸(stretch)图像。

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 随机地(但它经常发生)拉伸(stretch)宽度图像，就像我将宽度属性设置为 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;
}