强制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% 宽度和自动高度（不在底部剪切）。 此示例有效，但它使用“内容”属性而不是“背景图像”：https://jsfiddle.net/j47a6x7s/。我正在寻找相同的行为，但不使用内容。

Answer 1

那么，这是为什么呢？

在您的工作示例中，您使用内容。内容有自己的高度并占用空间，页面上的其他元素必须尊重这一点。

使用

background-image

解决方案，您使用不占用空间的背景。

.imageContainer2

元素无法知道背景图像的高度并适应它。

这个问题在这里得到解决：How to get div height to auto adjustment to background size?
请检查该解决方法是否适合您

Answer 2

如果您想要在背景属性中显示的图像始终具有相同的宽高比，您可以使用此处解释的技术之一，使 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 3

  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 4

尝试将这三个给您的

.imageContainer2

：

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

小提琴：https://jsfiddle.net/jsse9yL3/

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 以及所有相关的“问题”。

更新

另一种 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

您可以使用：

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

Answer 7

对我有用的是简单地使用现代CSS：宽高比：16/9...（除了背景大小：封面）

Answer 8

尝试：

body {
    padding: 0px;
}