Question

我有一个带背景图片的div。这个div里面有一些其他的潜水，比如我的导航。

我想让这个div与背景图像具有相同的高度。

我的尝试是：

.bg {
  width: 100 %;
  display: inline - block;
}

.bg::after {
  background: url('/images/desktop2.png') no - repeat center top;
  background - size: 100 % auto;
  content: "";
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z - index: -1;
}

<div class="bg">
  <div class="navigation"></div>
  <div>Other contents</div>
</div>

<div class="container">
  <div>First content</div>
  <div>
    <Second content</div>
      ...
  </div>

通过这种方式，我得到了bg div以获得图像高度，但container div到达div背景图像内。

我需要bg div只有导航和其他内容。

在这个div之后，我需要带有内容的容器

Answer 1

您可以使用伪和填充来扩展容器的高度以适合背景图像的已知比例：

例如

typedef struct node {
    int data;
    struct node* next;
} Node;

.bg-ratio {
  background: url(https://baconmockup.com/1024/576) no-repeat red/* only to check ratio height */
  ;
  background-size: 100% auto;
  overflow: hidden;
  /* to see the floatting pseudo */
  font-size: 5vmax;
  color: white;
  text-shadow:0 0 1px black;
}

.bg-ratio:before {
  content: '';
  float: left;
  padding-top: 56.25%;
  /* (576px / 1024px) x 100 */
}

body {
  width: 80%;
  margin: auto;
}

如何增加元素的高度以匹配比率？

百分比值中的垂直边距或填充将根据父级的宽度计算。 <div class="bg-ratio"> <header>content in here</header> <main> <p>play full page and resize window's width</p> </main> </div>将等于父级padding-top : 100%。如果设置为伪，则空框将展开为方形（比例1：1）。

来源：https://www.w3.org/TR/CSS2/box.html#padding-properties

<强> width

指定固定宽度。

<强> <length>

百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

与margin属性不同，填充值的值不能为负数。 与边距属性类似，填充属性的百分比值是指生成的框的包含块的宽度。

如果容器跨越整个屏幕，您可以通过<percentage>或vw使用height单位并删除伪。

min-height

.bg-ratio {
  background:
  url( https://baconmockup.com/1200/100) 
  no-repeat 
  red /* only to check ratio height */;
  background-size:100% auto;
  height:8.33vw;/* (100px / 1200px) x 100 */
}
body {
  margin:auto;
}

如何获得响应div的背景图像的高度

1 个答案: