jquery - 在响应中保持 div 与背景图像的比例高度

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%(实际上，calc(50% - margin - padding;，但这是另一回事)可能会更好。

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

注意:我还更改了 inline-block 的显示，它比 float: left 更优雅，并且可以防止图像对齐出现一些问题。

3) 迭代所有列表。

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
};