Question

background-image不适用于百分比div大小？如果我在width课程中对height和.contrast进行硬编码，则只会显示图片。如果宽度和高度是百分比，则不显示图像。有什么见解吗？

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％宽度，则无法访问父级的宽度？

Answer 1

除非您将其用作SRC，否则容器无法知道您的背景大小。

话虽如此，你可以只为此目的使用div，并使用background-size，background-position属性来获得所需的效果（即使背景适合div大小）。你不能做的就是让div＆＃34;继承＆＃34;来自其背景属性的大小。

看看我用你的这个小提琴：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);
}

您可以让div（或imgs）采用相对于父级的绝对宽度或宽度，或相对于窗口的宽度。这不是问题，因为容器的宽度可以与之相关。但它不能为每个人提供一个高度，他们不会有任何高度。

反过来，容器div扩展以适合其子元素的总高度。但是，作为替代解决方法，如果为容器提供固定高度，则可以为子项img指定相对高度。

TL / DR

使用带有src属性的img来从图片网址中猜出尺寸，或选择您喜欢的解决方法

DIV的CSS背景图片不适用于auto

1 个答案: