图片等比缩放方案
程序员文章站
2024-01-15 19:05:22
...
方法 1:设置最大宽高 + auto
img {
width: auto;
max-width: 400px;
height: auto;
max-height: 225px;
}
如果,此时图片存在父级,并且希望图片以等比缩放的形式,最大的填充在父级块中,也可以通过将 max-width、max-height 设置为 100% 来实现:
img {
max-width: 100%;
max-height: 100%;
}
方法 2:设置背景属性
<section>
<div class="img-wrap"></div>
<section>
<style>
.img-wrap {
width: 400px;
height: 225px;
background-image: url("./img/example.jpg");
background-size: contain;
}
</style>
方法 3:object-fit
img {
width: 400px;
height: 225px;
object-fit: contain;
}