html - 如何使用 css 制作单个响应式背景图片？

Question

我正在尝试为 div 创建背景图像:

<div class="wrap">

</div>

这是css:

.wrap {
    background-image: url("woody.jpg");
    background-size: contain;
    display: block;
    height: auto;
    padding: 0px;
    position: relative;
    width: 100%;
}

为什么要设置高度？为什么它不会使用图像的高度？如何只创建一个图像而不让它一遍又一遍地重复？并保持响应？另外，我如何让它拉伸(stretch)屏幕的整个宽度而不是最大化图像尺寸？

Answer 1

取决于您在哪里使用包装器，但是如果您使用相对位置，则必须设置高度，因为使用 height: auto 它将占用子项的高度。也许设置最小高度会是一个解决方法，但取决于上下文。

.wrap {
    background-image: url("woody.jpg");
    background-size: cover;
    display: block;
    min-height: 300px;
    height: auto;
    padding: 0px;
    position: relative;
    width: 100%;
}