我正在尝试为 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)屏幕的整个宽度而不是最大化图像尺寸?
最佳答案
取决于您在哪里使用包装器,但是如果您使用相对位置,则必须设置高度,因为使用 height: auto
它将占用子项的高度。也许设置最小高度会是一个解决方法,但取决于上下文。
.wrap {
background-image: url("woody.jpg");
background-size: cover;
display: block;
min-height: 300px;
height: auto;
padding: 0px;
position: relative;
width: 100%;
}
关于html - 如何使用 css 制作单个响应式背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33947719/