Question

我有li包含背景图片的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);
}

注意：我还更改了inline-block的显示，它比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 = [
	[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
};

保持div与背景图像的比例高度响应

1 个答案: