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

Question

您好，我遇到了一个问题，我需要在 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>

请帮助我提前谢谢！

Answer 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>