强制 div 具有背景图像的大小

Question

在 Div 上使用背景图像时，我无法显示图像的完整高度，无论是使用 height:auto; 还是 height: 100%。为什么这样？我该如何解决这个问题？

我在这里创建了一个 JS Fiddle：https://jsfiddle.net/2d0npz2v/5/

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: 100% auto;
  height: 100%;
}

<div class="imageContainer2"></div>

更新为清楚起见，图像需要 100% 宽度和自动高度（不在底部剪切）。此示例有效，但它使用 "content" 属性而不是 "background-image"：https://jsfiddle.net/j47a6x7s/。我正在寻找相同的行为，但没有使用内容。

Answer 1

试着把这三个给你的 .imageContainer2:

.imageContainer2 {
  position: fixed;
  width: 100%;
  height: 100%;
}

Fiddle: https://jsfiddle.net/jsse9yL3/

Answer 2

尝试：

body {
    padding: 0px;
}

Answer 3

如果您要在背景中显示的图像属性始终具有相同的纵横比，您可以使用其中一种技术 explained here 来制作 div根据宽度保持与图像相同的纵横比。

以您的示例为例：

body, html {
  height: 100%;
  margin: 0px;
}
.imageContainer2 {
  background-image: url("http://i.imgur.com/AWi7r5m.jpg");
  background-position: center top;
  background-size: auto 100%;
  padding-bottom:178%;
  background-repeat:no-repeat;
}

<div class="imageContainer2"></div>

请注意，我不知道您要达到的精确度是什么。根据上下文，使用此方法显示图像在语义上可能不正确。

Answer 4

嗯，这是为什么？

在您的工作示例中，您使用了内容。一个内容有它自己的高度并用完了 space，页面上的其他元素必须尊重它。

对于 background-image 解决方案，您使用了不使用 space 的背景。 .imageContainer2 元素无法知道背景图像的高度并自行适应它。

这里解决了这个问题：How to get div height to auto-adjust to background size?
只需检查解决方法是否适合您

Answer 5

您必须使用 IMG 才能做到这一点。为什么你坚持使用 CSS?

示例：

.container img
{
  width: 100%;
  height: auto;
}

<div class="container">
  <img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>

您不能使用 CSS 规则计算 background-image 高度，然后使 DIV 高度相等。最接近您问题的解决方案是使用 background-cover 和所有相关的 "issues".

更新

另一个CSS解决方案可能是padding-trick方式，如下：

.container
{
    background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
    background-size: contain;
    background-repeat: no-repeat;

    width: 100%;
    height: 0;

    padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */
}

<div class="container">
  
</div>

无论如何我建议使用第一个解决方案。

Answer 6

  var bgImg = new Image();
  bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
  bgImg.onload = function() {
  $('.test').css({'height':this.height,'width':this.width});
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">

</div>

希望这能完全解决您的问题。

Answer 7

您可以使用：

.imageContainer2 {
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%;
  margin: auto;
  min-height: 100vh;
  background-size: cover;
}

强制 div 具有背景图像的大小

Force div to have the size of background image

html

css

overflow

background-image