图片等比缩放方案

方法 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;
}