如何在保持纵横比的矩形内放置 30 张图像

Posted 2023-05-08

【中文标题】如何在保持纵横比的矩形内放置 30 张图像

【英文标题】：How to fit 30 images within a rectangle of maintaining aspect ratio

【发布时间】：2021-05-25 12:18:33

【问题描述】：

您好，我遇到了一个问题，我需要在 752px 的矩形内修复 30 个图像

问题：我需要通过保持纵横比来修复矩形752px 内的30 (160 X 120) 图像

注意：我的图片是160 X 120 我想保持纵横比

为了更好地查看这里是codepen： https://codepen.io/eabangalore/pen/abBVvQq

以下是我的问题：

$(function()
    var imagesStr = '';
    for(var i = 1; i <= 30; i++)
          imagesStr += `<li><img src="https://via.placeholder.com/160x120?text=$i"/></li>`;
     
   $('.image-wrapper').html(imagesStr);
)

.image-container
   width: 752px;
   height:122px;
   border:1px solid yellow;
   border-radius:3px;
  z-index:1;


.image-wrapper
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="image-container">
     <ul class="image-wrapper">
       
    </ul>
</div>

请帮助我提前谢谢！

【问题讨论】：

如果你想要“一个 752px 的正方形”，为什么要设置 height: 122px？

@CuongLeNgoc，对不起，我的意思是矩形

【参考方案1】：

在子项上使用flex:1 1使其宽度相同，然后使图像width:100%保持纵横比。

$(function() 
  var imagesStr = '';
  for (var i = 1; i <= 30; i++) 
    imagesStr += `<li><img src="https://via.placeholder.com/160x120?text=$i"/></li>`;
  
  $('.image-wrapper').html(imagesStr);
)

.image-container 
  width: 752px;
  height: 122px;
  border: 1px solid yellow;
  border-radius: 3px;
  z-index: 1;


.image-wrapper 
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;


.image-wrapper li 
  flex: 1 1;


.image-wrapper li img 
  width: 100%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
  <ul class="image-wrapper">

  </ul>
</div>

【讨论】：

很好，但是图像不可见，我们不能增加高度来保持纵横比吗？

根据简单的数学，答案是否定的，直到你删除一些项目或增加父项的宽度。