如何使背景圖片的行爲DIV喜歡像<img "width=100%"/>

我有這樣的代碼：如何使背景圖片的行爲DIV喜歡像<img "width=100%"/>

div#fond { 
 
    background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg'); 
 
    background-size: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div id="fond"> 
 
    ABCD 
 
    </div> 
 
    <br> 
 
    <img src="https://www.thetileapp.com/images/Purse_Tabletop-46.jpg" width="100%" /> 
 
</body> 
 

 
</html>

我該怎麼做才能使DIV具有比IMG相同的行爲，所以該div的高度適應窗口的寬度。目前，高度是適應div的內容。

來源

2016-03-19 coutier eric

對於工作百分比高度，您必須添加html, body {height: 100%;}，否則瀏覽器將無法計算默認值爲auto的百分比。百分比高度基於parnet工作，當父母爲body/html時，您需要添加我提到的規則。

或者，您可以使用視臺（vw/vh），如：

div#fond { 
    background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg'); 
    background-size: cover; 
    height: 100vh; 
    width: 100vw; 
}

來源

2016-03-19 14:59:11 Aziz

感謝您的反射阿齊茲但是，I'e測試了2個解決方案，但沒有人給的結果，一個div就像「」我認爲解決方案更復雜... –

看看我的演示：https://jsfiddle.net/azizn/nvdm4rrd/它按預期工作 – Aziz

感謝阿齊茲爲你的毅力。我已經對你的小提琴進行了一些修改，在div下添加「

如何使背景圖片的行爲DIV喜歡像<img "width=100%"/>

回答

相關問題