Question

我正在尝试为div创建背景图片：

ssh

这是<div class="wrap"> </div>：

css

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

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%;
}

Answer 2

首先要做的事情是：你将你的背景称为“形象”，但实际上并非如此。它只是一个背景，不影响流程，在DOM树中没有任何表示。所以你可以写background:red并期望相同。

现在：

你必须设置高度，因为包装div不知道里面有什么，对于浏览器来说，实际上并没有什么物理。
因此浏览器不会使用图像高度，因为它不是物理图像，不是由布局引擎计算的
有可能让它快速响应，你只需要知道一个图像的比例，如果我们假设它是2：1，那么你可以写一些像height:50vw，但毕竟我不建议此。
在这种情况下我会做什么...如果我不能指望图像尺寸比例，那么可能会在其中放置像img{display:block;width:100%;height:auto;}之类的图像，如果你要在jsfiddle上做一些演示，我们可以玩它。

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

2 个答案: