是什么原因 height:auto 有时为 0答案

【问题标题】：What`s the reason that height:auto sometimes it`s 0是什么原因 height:auto 有时为 0
【发布时间】：2019-09-20 00:37:19
【问题描述】：

#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%;

&lt;div id="banner"&gt;&lt;/div&gt;

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

&lt;img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt=""&gt;

我总是遇到响应式图像的问题，但我没有找到解决问题的答案。

问题出在图片上

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

当我添加一个简单的图像并设置它的样式时，它就可以工作了。当我开始一个包含很多 div 的更复杂的项目并且我设置相同的属性时不再起作用。对此最纯粹的解释是什么。

【问题讨论】：

我不知道它是否适用于您的情况，但height:auto 将浮动元素容器的高度设为 0。也许这就是为什么您有时只看到它的原因。解决方案是将overflow:auto; 添加到父容器中。然而，有些人认为即使这也是矫枉过正，而且`overflow-y:auto;足够了。
我在玩代码笔并想出一件事，当图像在 HTML 中时它可以工作，当我有一个带有类的 div 并向该类添加背景图像时不会t work anymore but still dont知道为什么
可以链接codepen吗？
我添加了 2 个代码 sn-ps

标签： css image height responsive

【解决方案1】：

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

【讨论】：