#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 的更复杂的元素时,我设置相同的属性不再起作用。对此最纯粹的解释是什么。
最佳答案
这是因为当您添加 <img>
直接到html,浏览器将元素的高度设置为您提供的图像的高度(除非另有说明)。当您将图像添加为 <div>
的背景时并将高度设置为自动,它会尝试将 div 的大小调整为内容的高度。但是,在这种情况下,没有内容——只有一个背景,一旦 div 具有一定高度,它就会成为背景。空的 div 没有高度。因此,如果您希望图像成为 <div>
的背景, 它必须包含一些内容,或者手动设置其高度。
关于css - 高度:auto sometimes it`s 0是什么原因,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55936359/