保持股利比高度與背景圖像響應

Question

我有HTML李載背景圖像，但我想保持響應li尺寸與圖像大小相同比例：

<ul> 
    <li><a href="#">hello</a></li> 
    <li><a href="#">hello1</a></li> 
    <li><a href="#">hello2</a></li> 
</ul> 
<style> 
ul li {width:49%; float:left; height:auto} 
ul li:nth-child(1) {background:url(url1) no-repeat left top; background-size:100% auto;} 
ul li:nth-child(2) {background:url(url2) no-repeat left top; background-size:100% auto;} 
ul li:nth-child(3) {background:url(url3) no-repeat left top; background-size:100% auto;} 
</style> 

正如你所看到的jsfiddle，它包含完整寬度，但高度被裁剪。 我希望li的寬度與調整圖像的高度相同。感謝您的幫助。

Answer 1

可以使用Javascript實現與下列步驟：

1）定義的背景圖像的尺寸（或它們的高度/寬度之比）。

var image_dimensions = [ 
    [512, 320], 
    [512, 288], 
    [512, 358], 
]; 

2）使用CSS的寬度設定爲49％（實際上，潛在的更好的計算值（50％ - 餘量 - 填充;但是，這是一個不同的故事）

ul li { 
    display: inline-block; 
    width: calc(50% - 2px); 
} 

注：我也改變了內嵌塊的顯示方式，它比float：left更優雅，並且可以防止圖像對齊時出現一些問題。

3）遍歷所有的lis。

var images = document.querySelectorAll('ul#image_list li'); 

for (var i = 0; i < image_dimensions.length && i < images.length; i++){ 

4）檢查圖像的實際寬度。乘以給出所需高度的寬度x比率（高度/寬度）。

var ratio = image_dimensions[i][1]/image_dimensions[i][0]; 
var height = images[i].offsetWidth * ratio; 

5）設置圖像的高度。

images[i].style.height = height + 'px'; 

演示的版本你的jsfiddle的：

var image_dimensions = [ 
 
\t [512, 320], 
 
    [512, 288], 
 
    [512, 358], 
 
]; 
 

 
var images = document.querySelectorAll('ul#image_list li'); 
 

 
for (var i = 0; i < image_dimensions.length && i < images.length; i++){ 
 
    var ratio = image_dimensions[i][1]/image_dimensions[i][0]; 
 
    var height = images[i].offsetWidth * ratio; 
 
    images[i].style.height = height + 'px'; 
 
}

ul li { 
 
    display: inline-block; 
 
    width: calc(50% - 2px); 
 
} 
 

 
ul li:nth-child(1) {background:url("http://1.bp.blogspot.com/-XlNXQh-wWx0/VEvOnrhNi-I/AAAAAAAAHfY/EMUT8ZWkjZ0//autumn-sad-heart-free-desktop-wallpaper-1920x1200.jpg") no-repeat left top;background-size: 100% auto;} 
 
ul li:nth-child(2) {background:url("http://4.bp.blogspot.com/-Ng8xrfA_UuY/VEvMCERa3LI/AAAAAAAAHdw/R3V7Tv5BgXg//fg.jpg") no-repeat left top; background-size:100% auto;} 
 
ul li:nth-child(3) {background:url("http://3.bp.blogspot.com/-VcuSwUBvb_Q/VEvNn6LSBBI/AAAAAAAAHfA/llfaD-qwBlU//vintage-letter-free-desktop-wallpaper-5672x3970.jpg") no-repeat left top; background-size:100% auto;}

<ul id="image_list"> 
 
    <li><a href="#">hello</a></li> 
 
    <li><a href="#">hello1</a></li> 
 
    <li><a href="#">hello2</a></li> 
 
</ul>

PD：此代碼只計算一次。如果您在更改屏幕大小時需要調整大小。你可以這樣做：

window.onresize = function(){ 
    // wrap all the previous code here too. 
    // Or better, move it to a function and call it both on window.onload and window.onresize 
};