身高的原因是什么?自动有时是0

时间:2019-05-01 12:33:43

标签: css image height responsive

#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的更复杂的项目时,我设置相同的属性不再起作用。对此最纯粹的解释是什么。

1 个答案:

答案 0 :(得分:1)

这是因为,当您直接将<img>添加到html时,浏览器会将元素的高度设置为您提供的图像的高度(除非另外指定)。当您将图像添加为<div>的背景并将高度设置为auto时,它将尝试将div的大小设置为内容的高度。但是,在这种情况下,没有内容-只有背景,一旦div具有一定的高度,它将作为背景。空div没有高度。因此,如果要使图像成为<div>的背景,则该图像必须包含某些内容,或者必须手动设置其高度。