Question

我做了以下布局：

＆＃13;

html,
body {
  height: 100%;
}

.header {
  height: 120px;
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

＆＃13;

它的工作原理是因为我使用了具有固定像素值的height属性。

如果删除图像消失：

＆＃13;

html,
body {
  height: 100%;
}

.header {
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

＆＃13;

使用固定高度的一个问题是无法完成响应。

如何在不使用固定高度的情况下显示背景？或者我应该回到使用img-tag吗？

高度由图像尺寸本身决定。

Answer 1

目前，您的.header没有任何内容，因此其高度实际为0px ....

要更改它，您可以将内容放入.header中，例如：text，images ...或通过css给出高度，静态（px）或动态（通过'％'，或者'VH' ...）

Answer 2

您可以使用viewport height使div响应，在下面的例子中40vh是视口高度的40％。

html,
body {
  height: 100%;
}

.header {
  height: 40vh;
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

Answer 3

您可以使用如下所示的透明图像：

＆＃13;

html,
body {
  height: 100%;
}

.header {
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header img {
  width: 100%;
}

＆＃13;

<div class="row">
  <div class="columns small-12 header">
    <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQBAMAAACkCxkHAAAAGFBMVEUAAAD///+TlJWcnp+Ji4yIiouVlZaSk5OelJf9AAAAAXRSTlMAQObYZgAAANVJREFUeF7tzTEVgEAMBbB/HZivDhCBBAQgBf8TLngdEgNJZw6qszMGV1YG4X6OHxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3g1DZGYSVPjMG1R9lOgHLp7M9BAAAAABJRU5ErkJggg=="
    />
  </div>
</div>

＆＃13;

您可以在此更改窗口大小： https://jsfiddle.net/gcejf26t/

如果你发现图像显得很奇怪，因为它们就是这样！与CSS无关（当然透明图像比例可以等于你的图像比例）。

您可以找到比我使用的更小的base64编码图像，并且可以根据需要找到更好的比例。

但你为什么要这样做呢？我不知道！为简单起见，请使用<img>。

CSS：如何在不设置固定高度的情况下使背景图像出现在div中

3 个答案: