html - div标签中的背景图片大小-全屏-嵌入式CSS(已关闭)

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我最初一直尝试在div中添加背景图片。我在调整整个屏幕的图像宽度时遇到问题。

参考以下内容，按照https://www.w3schools.com/howto/howto_css_full_page.asp，我尝试查看它是否有效，但是我发现图片本身不可见



当我添加width和height时，也以像素而不是％来添加，我可以查看图片，但是尺寸不适合屏幕完美。


请赞成解决这个问题。

最佳答案

如果父级没有身高，则子级上的百分比值将无效，因为当您说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>中有一些文本，所以它们的高度将不等于其高度，现在我们知道父级的高度是一个高度，因此百分比对孩子的价值应该起作用，但事实并非如此，为什么你可能会问？

The Specs says


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


基本上，如果我们说：

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>