高度的原因是什么：自动有时它是0

Question

#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
  height: auto;
  max-width: 100%;
 

<div id="banner"></div>

img {
  height: auto;
  max-width: 100%;}
 

<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">

我总是运行响应式图像的问题，我没有找到澄清问题的答案。

问题出在图像上

image {
  height:auto;
  width:100%;
}

当我添加一个简单的图像和样式它，它的工作原理。当我开始一个更复杂的项目与很多div，我设置相同的属性不再工作。对此最简单的解释是什么？

Answer 1

这是因为当您直接将<img>添加到html时，浏览器会将元素的高度设置为您提供的图像的高度（除非另有说明）。当您将图像添加为<div>的背景并将高度设置为auto时，它会尝试将div的大小调整为内容的高度。但是，在这种情况下，没有内容 - 只有背景一旦div有一些高度将成为背景。空div没有高度。因此，如果您希望图像是<div>的背景，它必须包含一些内容，或者手动设置其高度。