background-size用法

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-image: url("photo.png");
    background-repeat: no-repeat;

    /* 缩放图片以完全覆盖容器（保持宽高比），可能裁剪部分图片。 */
    background-size: cover;

    /* 缩放图片以完整显示在容器内（保持宽高比），可能留白。 */
    background-size: contain;

    /* 保持图片原始尺寸（保持宽高比）。*/
    background-size: auto;

    /* 固定宽150px，高度按比例缩放（保持宽高比）。 */
    background-size: 150px;

    /* 固定宽100px，高100px（可能变形）*/
    background-size: 100px 100px;

    /* 宽度100%，高度50%， （可能变形）相对于容器的尺寸（非图片本身）*/
    background-size: 100% 50%;
}

background-size: cover;

缩放图片以完全覆盖容器（保持宽高比），可能裁剪部分图片

background-size: contain;

缩放图片以完整显示在容器内（保持宽高比），可能留白

background-size: auto;（默认值）

保持图片原始尺寸（保持宽高比）

background-size: 150px;

固定宽150px，高度按比例缩放（保持宽高比）

background-size: 100px 100px;

固定宽100px，高100px（可能变形）

background-size: 100% 50%;

宽度100%，高度50%，（可能变形）

相对于容器的尺寸（非图片本身）