div标签中的背景图像大小 - 全屏 - 内联css

Question

我最初尝试在div中添加背景图片。我按照整个屏幕调整图像宽度的问题。

参考下文，根据https://www.w3schools.com/howto/howto_css_full_page.asp，我试图查看它是否有效，但我发现图片不可见

当我添加宽度和高度时，这也是像素而不是％，我能够查看图片，但尺寸不适合屏幕完美。

请支持解决此问题。

Answer 1

如果父级没有高度，则子级上的百分比值不起作用，因为当您说height:100%表示父级高度为100％时。

.parent {}

.kid {
  width: 100%;
  height: 100%;
  background-image: url('http://via.placeholder.com/350x150');
}

<div class="parent">
  <div class="kid"></div>
</div>

默认情况下，元素高度是根据其内容的高度计算的。

console.log(document.querySelector('.parent').clientHeight)

.kid {
  height: 100px;
  width: 100px;
  background: orange;
}

<div class="parent">
  <div class="kid">kid</div>
</div>

在你的情况下，父母有两个孩子<h6>和一个空div，因为你的<h6>中有一些文字，pare not等于它的高度，现在我们知道父母了有一个高度，所以孩子的百分比值应该工作，但事实并非如此，为什么你可能会问？

The Specs says

  

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值将计算为“auto”。根元素的百分比高度相对于初始包含块。

基本上如果我们说：

Parent
    height:200px;
Child
    height:50% // This should value to 100px;

但是如果我们没有特别设置它会保持自动（意味着取决于内容），那么

Parent
    height:auto; which the default value
Child
    height:50%  // 50% of auto is 0

所以你要么在那个div上设置一个高度。

.parent {
  border: 1px solid;
}

.kid {
  height: 100px;
  background-image: url('http://via.placeholder.com/300x100');
  ;
  background-size: 100% 100%;
}

<div class="parent">
  <h1>losadf</h1>
  <div class="kid"></div>
</div>

或者在父母身上，虽然它可能导致一些溢出。

.parent {
  border: 1px solid;
  height: 100px
}

.kid {
  height: 100%;
  background-image: url('http://via.placeholder.com/300x100');
  ;
  background-size: 100% 100%;
}

<div class="parent">
  <h1>losadf</h1>
  <div class="kid"></div>
</div>

或<img>，因为它加载图像并获取它的高度和宽度，我建议你因为你只想显示一个图像，它的高度可以用max-height和max-width完善;

.parent {
  border: 1px solid;
}

<div class="parent">
  <h1>losadf</h1>
  <img src="http://via.placeholder.com/300x100">
</div>

Answer 2

试试这个：

background-size: 100% 100%; //instead  of background size cover

Answer 3

尝试使用浮动，您可以调整图像的宽度和高度