如何在保持纵横比的矩形内放置 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>