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

1 回答

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

  回复于 2024-05-03T03:24:37+08:00