设置的div背景图片上下被裁切，请问HTML/CSS定义是否存在问题？

我用以下HTML和CSS为div设置背景图片，但完成后背景图片的上下部分被裁切了，请问代码定义是否存在问题？

<body onload="myFunction()">
    <h4>Entities Presenter</h4>
    <div class="bg">
        <canvas id="my-canvas" class="canvas"></canvas>
    </div>
</body>

body,
html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("wp2753284.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

问题原因 #

1. background-size: cover的特性：这个属性会强制背景图片等比例缩放至完全覆盖容器，当容器宽高比与图片原始宽高比不匹配时，图片必然会有部分区域被裁切。比如如果你的图片是竖版（高度大于宽度），而容器是横版（宽度大于高度），图片会被横向拉伸至铺满容器宽度，超出容器高度的上下部分就会被裁切。
2. 容器高度设置冲突：body和.bg都设置了height: 100%，但body内还有<h4>元素，导致.bg容器的实际高度加上<h4>的高度超出视口高度，页面出现滚动条。背景图片基于.bg容器的100%视口高度尺寸缩放，进一步放大了裁切问题。

解决方案 #

根据你的需求选择对应的方案：

方案1：完整显示图片，允许容器出现空白

将background-size: cover改为contain，图片会等比例缩放至完全适应容器的最大边，不会被裁切，但容器可能出现空白区域：

.bg {
    background-image: url("wp2753284.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

方案2：优先保证图片高度铺满，宽度自适应

设置background-size: auto 100%，让图片高度铺满容器，宽度按比例缩放，避免上下裁切（可能左右出现留白）：

.bg {
    background-image: url("wp2753284.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

方案3：让.bg占据页面剩余高度（排除<h4>）

使用Flex布局调整页面结构，让.bg自动填充<h4>之外的剩余空间，避免容器高度溢出：

body,
html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.bg {
    background-image: url("wp2753284.jpg");
    flex: 1; /* 替换原有的height:100% */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* 如需保留cover，此时容器宽高比更合理，裁切情况会改善 */
}

内容的提问来源于stack exchange，提问作者lm.