我想包括背景图像，这是超大(4000pxx3000px)在div，在这样一种方式，宽度将采取最大宽度的屏幕和高度将调整它。
我不知道为什么，但如果没有指定高度（像1000px)，它是不工作的。 图像根本没有出现。
我想创建jsfiddle，但它在那里工作（可能是因为高度是自动指定的）
代码部分(HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
代码部分(CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
与这段代码什么也没有出现（因为它看起来高度是0px)，我如何做的事情，高度将调整到宽度的大小，即缩放本身。
在您的示例中，div继承父section标记的宽度，同时考虑到body元素上的任何边距或填充。 它有display:block，所以宽度是100%，高度是自动的，所以它是里面任何东西的大小。 因此，在您的示例中，div标记中没有任何内容，这意味着它的height:auto；值是0。
null
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
试一下这个，把高度100%的汽车换掉，然后检查一下。
null
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>