发现一段很有意思的样式 分享出来

这段 CSS 代码的目的是为了让类名为 scale 的元素内部的图片，宽度占满父元素宽度，高度根据宽度按原始比例自动调整。

使用 contain 值

.scale img {
    /* 设置背景图片的尺寸，使图片等比例缩放以完全显示在元素内 */
    background-size: contain;
    /* 图片宽度占父元素宽度的 100% */
    width: 100%;
    /* 图片高度根据宽度按原始比例自动调整 */
    height: auto;
}

contain 值会让背景图片等比例缩放，保证图片能完整显示在元素的背景区域内，可能会在背景区域留下空白。

使用 cover 值

.scale img {
    /* 设置背景图片的尺寸，使图片等比例缩放以覆盖整个元素 */
    background-size: cover;
    /* 图片宽度占父元素宽度的 100% */
    width: 100%;
    /* 图片高度根据宽度按原始比例自动调整 */
    height: auto;
}

cover 值会让背景图片等比例缩放，以填满整个元素的背景区域，图片可能会被裁剪一部分。

另外一种写法

.scale img {
    /* 设置图片的填充方式，使图片等比例缩放以覆盖整个元素 */
    object-fit: cover;
    /* 图片宽度占父元素宽度的 100% */
    width: 100%;
    /* 图片高度根据宽度按原始比例自动调整 */
    height: auto;
}

这里使用 object-fit: cover 让图片本身等比例缩放以覆盖整个元素，同样也可以使用 object-fit: contain 让图片完整显示在元素内。