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

Question

我做了如下布局：

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

<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>

之所以有效，是因为我使用了具有固定像素值的高度-属性。

如果删除图像消失：

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

<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>

使用该固定高度的问题之一是无法实现响应。

如何在不使用固定高度的情况下显示背景？还是我应该改用 img-tag？

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

Answer 1

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

要更改它，您可以将内容放入 .header 中，例如：文本、图像...或者通过 css 给它高度，可以是静态的（以像素为单位），也可以是动态的（通过 '%'，或 '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

您可以像下面这样使用一张透明图片：

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

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

您可以在此处更改 window 尺寸： https://jsfiddle.net/gcejf26t/

如果你注意到图像显示很奇怪，因为它们就是那样！与CSS无关（当然透明图像比例可以等于您图像的比例）。

你可以找到比我用过的更小的base64编码图像，也可以找到更好的比例。

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

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

CSS: How to make a background-image appear within a div without setting a fixed height

html

css

responsive-design

zurb-foundation