DIV的CSS背景图像不适用于汽车

background-image不适用于百分比div大小吗？如果我在.contrast类中硬编码width和height，图像才会显示出来。如果宽度和高度都是百分比，则图像不显示。任何见解？DIV的CSS背景图像不适用于汽车

CSS：

.parent{ 
    width=1000px; 
} 
img.contrast{ 
    width:400px; 
    height:100px; 
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg); 
}

HTML：

<div class="parent"> 
    <img class="contrast"/> 
    <img class="contrast"/> 
    <img class="contrast"/> 
</div>

JsFiddle

EDIT1：所以.contrast不能继承父组的长度？如果我在父分区中设置了3个分区，宽度设置为25％，则无法访问父分区的宽度？

来源

2014-07-05 user3808357

错字：1000像素; –

除非您将它作为SRC使用，否则容器无法知道任何尺寸都是您的背景。

这样说，你可以使用div来达到这个目的，并且可以使用背景大小的背景位置属性来获得所需的效果（即使背景适合div大小）。你不能做的是让div“继承”它的背景属性的大小。

在这个小提琴我从你做看看：http://jsfiddle.net/amenadiel/x9a56/2/

img.contrast{ 
    width:450px; 
    height:100px; 
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg); 
} 

img.contrast2{ 
    width:50%; 
    height:100px; 
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg); 
} 

img.contrast3{ 
    width:20em; 
    height:100px; 
    background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg); 
}

你可以有申报单（或IMGS）采取相对于窗口绝对宽度，或宽度相对于父母，或宽度。这不是问题，因为容器的宽度可以与之相关。但它无法为每个人提供一个高度，他们不会有任何高度。

反过来，容器div扩展到适合其子元素的总高度。但是，作为替代解决方法，如果您为容器提供了固定高度，则可以将相对高度分配给儿童img。

TL/DR

使用与IMG src属性从图像的URL在你的CSS改变成宽猜大小，或挑选自己喜欢的解决办法

来源

2014-07-05 19:43:22 amenadiel

DIV的CSS背景图像不适用于汽车

回答

相关问题