Question

在我的网站上，用户可以上传图片。它们可以有各种尺寸，但我希望它们适合相同高度的盒子，因此它们可以放在一起并形成一个网格。图像应该在框中居中，保持其纵横比。我可以在CSS中执行此操作吗？我一直在尝试使用flexbox，但我无法使用它。

e.g。

如果高度大于宽度：

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

如果宽度大于高度：

sign = '$'

doc.css('*:contains("'+sign+'")').each do |element|
     #Code that i wrote that extract the price from a text
end

Answer 1

这是一个5 x 5网格，可以使用flex进行缩放，可下载。

Fiddle version

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

Answer 2

height: 100px;
width: auto;

这将调整图像大小以适应该高度。

保持动态加载图像的纵横比

2 个答案: