css中絕對定位的自動高度

我想將圖像設置爲div的背景，以便爲每個設備的圖像分辨率更改源。問題是我不想設置div的高度，但只有它的寬度是100％，以便它可以適應設備窗口的寬度。因此，我想根據div的寬度自動生成高度。css中絕對定位的自動高度

我已經設置了自動的高度，但除非我使用值設置高度，否則不會出現div。

#imagetree { 
    position:absolute; 
    z-index:12; 
    width:100%; 
    height:auto; 
    bottom:0; 
    overflow: hidden; 
    background: url(images/trees.png); 
    background-repeat: no-repeat; 
}

來源

2014-09-22 Al Kush

可以添加JSfiddle嗎？如果我們沒有看到會發生什麼，這很難理解。 – 2014-09-22 09:53:57

，如果你事先知道你能欺騙使用比例padding-bottom

圖像的寬度和高度之比例如，如果您的圖像是300x180您可以使用此css

#imagetree { 
    position:absolute; 
    z-index:1; 
    bottom:0; 
    overflow: hidden; 
    background: url(http://dummyimage.com/300x180/000000/fff.jpg); 
    background-repeat: no-repeat; 

    width: 100%;   /* use 100% of width */ 
    padding-bottom: 60%; /* 180px is 60% of 300px */ 
    background-size: cover; /* cover the div entirely with the background */ 
}

例如：http://codepen.io/anon/pen/ruBFt

來源

2014-09-22 09:58:46 fcalderan

太棒了！但是在那裏填充底部的作用是什麼？我很困惑。 – 2014-09-22 10:18:04

您需要使用它才能確保保留正確的圖像比例。當然，我設置它的價值是由於我使用的具體圖片尺寸而選擇的。你可能會有所不同。 – fcalderan 2014-09-22 10:29:10

當你給position: absolute的height和width沒有初始設置。您需要使用CSS手動設置它們。在你的情況下，既然你已經把背景作爲一個圖像，被絕對定位，你爲什麼要把它設置爲background-image？

您可以將圖像放入<img />標籤本身，然後使用正常的width s和height s進行渲染，該圖像也與圖像成比例！在absolute定位的容器內添加一個圖像來更改您的代碼。

<div id="imagetree"> 
    <img src="images/trees.png" /> 
</div>

而且在CSS，你可能想給這樣的：

#imagetree img {max-width: 100%;}

來源

2014-09-22 09:53:53

我使用背景圖片的原因是因爲根據css查詢即桌面，平板電腦，手機來改變源代碼。 – 2014-09-22 09:55:33

@AlKush是否有相同大小的圖像？既然你提出了**不能**的問題，這使得答案過時了。 – 2014-09-22 09:56:06

不，他們有不同的分辨率或大小，這就是爲什麼我使用背景圖像。我對這個錯字感到抱歉。 – 2014-09-22 09:58:12

css中絕對定位的自動高度

回答

相關問題