如何在没有柔性盒的情况下使图像使用最佳空间量

Question

在一系列图像中，如底部的代码（图像尺寸不一致），下一行图像从最高图像的底部开始。我知道这可以通过本教程中的弹性框来解决：https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp但是，我需要像下面的代码一样扩展图像。

.holder {
  background-color: aquamarine;
  width: 500px;
}

.holder>img {
  width:32%;
  transition: 100ms;
}

.holder>img:hover {
  width:66%
}

<div class="holder">
    <img src="https://images.pexels.com/photos/403571/pexels-photo-403571.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
    <img src="https://images.pexels.com/photos/219779/pexels-photo-219779.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
    <img src="https://images.pexels.com/photos/6936/desk-office-plant-succulent-6936.jpg?auto=compress&cs=tinysrgb&h=650&w=940">
    <img src="https://images.pexels.com/photos/8795/plant-cactus.jpg?auto=compress&cs=tinysrgb&h=650&w=940">
    <img src="https://images.pexels.com/photos/56589/cactus-plant-plant-rack-green-56589.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
    <img src="https://images.pexels.com/photos/137036/pexels-photo-137036.jpeg?auto=compress&cs=tinysrgb&h=650&w=940">
</div>

是否可以制作可以缩放的砖石型图像？