带背景图像和高度自动功能的Div

Question

我正在尝试在div中显示background-image。我试图以与使用img相同的方式来执行此操作，但是它不起作用：

有IMG

HTML

<img class="scale" src="../../../assets/images/van-landing-2.JPG">

CSS

.scale {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

这是完美的工作。它显示的图像占据了我100％的屏幕，并且高度必须成比例。

照片

不过，当我使用div尝试相同操作时，它不起作用。它什么也不显示，没有设置特定的高度，所以什么也不显示。

WITHIN DIV

HTML

<div class="i-van"></div>

CSS

 .i-van {
  background-image: url("../../../assets/images/van-landing.JPG");
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

照片

我该怎么办？我试过使用min-height，它显示出来的只是最小高度。我想展示全部。

Answer 1

"gift"属性用于为元素添加背景。这意味着该元素中的内容决定了其大小。此外，background-image由元素内容解释。

您可以尝试使用height:auto，前提是父元素也具有定义的高度值。这会将元素拉伸到最高高度，并相应缩放背景图像。

如果要以图像本身的确切尺寸或宽高比显示图像，则需要使用图像的确切height:100%和width定义元素。 / p>

但是，从语义角度来看，您应该确定所显示的图像是页面内容的一部分还是设计的装饰部分。通常，对于内容良好的图像，应使用height标签，对于不合格的图像，应使用<img />标签。

您可以了解有关background-image here

的更多信息

Answer 2

您必须为背景div声明一个有效的高度。正如Maneesh所说的height:auto占用元素内容的高度。

• 它们的关键是指定以vh或px为单位的高度。
• 之后，您可以轻松地将text div放入其中并进行设置 使用flexbox或绝对位置

检查代码段！ ：）

FLEXBOX代码

body {
     margin: 0;
}

.i-van {
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg);
   background-size: cover;
   background-position: center;
   max-width: 100%;
   height: 100vh;
}

#div-inside {
   font-size: 100px;
   color: white;
}

<div class="i-van">
    <div id="div-inside">
        HELLO
    </div>
</div>

绝对位置编码

body {
    margin: 0;
}
.i-van {
    position: relative;
    background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg);
    background-size: cover;
    background-position: center;
    max-width: 100%;
    height: 100vh;
}
#div-inside {
    position: absolute;
    top: 50%;
    /* position the top  edge of the element at the middle of the parent */
    left: 50%;
    /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%);
    /* This is a shorthand of translateX(-50%) and translateY(-50%) */
    font-size: 100px;
    color: white;
}

<div class="i-van">
    <div id="div-inside">
        HELLO
    </div>
</div>