欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片等比缩放方案

程序员文章站 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;
}

相关标签: css3 css css3