根据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; 
}