根据CSS调整图像大小，是否可能？

Question

有没有办法用CSS调整保留比例的图像？

容器具有固定的宽度和高度

<div class="container">
   <img class="theimage" src="something" />
</div>

我问的原因是因为布局可以改变（从列表到图标通过类），图像需要按比例调整大小（减少约40％）。

我知道如何使用JavaScript以及如何通过CSS调整大小，但我不相信它可以使用CSS以比例完成，除非有一些聪明的方法。

Answer 1

.theimage{
    width:100%;
    height:auto;
}

或

.theimage{
    width:auto;
    height:100%;
}

取决于你想如何给出比例偏好...... :)：）

多数人。

Answer 2

要在缩放时保存图像比例，您可以使用object-fit CSS3属性。

有用的文章：Control image aspect ratios with CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}