根据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-fitCSS3属性.

实用文章:使用CSS3控制图像宽高比

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