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背景圖像不適用於汽車

回答

相關問題