保持动态加载图像的纵横比[副本]

Question

在我的网站上，用户可以上传图片。它们可以是各种大小的，但我想让它们装在相同高度的盒子里，这样它们就可以挨着放在一起，形成一个网格。图像应该在框中居中，保持其纵横比。我可以在CSS中这样做吗？我一直在尝试flexbox的东西，但我不能让它工作。

|-------------| 
|   imageim   |
|   ageimag   |
|   eimagei   |
|   mageima   |
|   geimage   |
|   imageim   |
|-------------|

|-------------|
|             |
|imageimageima|
|geimageimagei|
|mageimageimag|
|eimageimageim|
|             |
|-------------|

Answer 1

下面是一个5 x 5的网格，可伸缩，可下载，使用flex。

小提琴版本

.parent {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.parent a {
  display: inline-block;
  height: calc(20% - 2px);
  width: calc(20% - 2px);
  background: #ddd no-repeat center center;
  background-size: contain;
  margin: 1px;
}
.parent a:nth-child(odd) {
  background-image: url(http://lorempixel.com/300/150/animals/3);
}
.parent a:nth-child(even) {
  background-image: url(http://lorempixel.com/150/300/animals/3);
}

<div class="parent">
  
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/300/150/animals/3" download="filename"></a>
  <a href="http://lorempixel.com/150/300/animals/3" download="filename"></a>  

</div>