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

时间:2017-04-15 18:54:33

标签: jquery html css

我有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的宽度与调整大小时图像的高度相同。谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

您可以通过以下步骤使用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
};