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

【问题标题】：CSS: How to make a background-image appear within a div without setting a fixed heightCSS：如何在不设置固定高度的情况下使背景图像出现在 div 中
【发布时间】：2017-08-27 04:49:56
【问题描述】：

我做了以下布局：

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

高度由图像大小本身决定。

【问题讨论】：

标签： html css responsive-design zurb-foundation

【解决方案1】：

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

要改变这一点，您可以将内容放入您的 .header 中，例如：文本、图像...或通过 css 为其指定高度，可以是静态的（以 px 为单位），也可以是动态的（通过 '%' 或 'vh '...)

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

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

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

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

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

【讨论】：