创建具有相同大小的响应式图像库答案

【问题标题】：Create a responsive gallery of images with the same size创建具有相同大小的响应式图像库
【发布时间】：2019-02-12 16:20:17
【问题描述】：

我正在使用 React，我正在尝试使用 bootstrap 创建一个大小相同的图片库。现在我以这种方式将一些图像放入网格中

<img src=.... style={{maxWidth: "100%"}} class="img-fluid" alt="Responsive image"/>

通过这种方式，由于图像比例，我始终获得具有相同宽度但不同高度的响应式图像。

我想找到一种方法来用固定比例的容器包装图像。显然，我可以看到图像的高度比他的容器小，或者图像在顶部和底部被切割，但这对我来说不是问题。

例如，如果我有 3 张具有这些比例的图像：

100 x 300
400 x 100

我想看到 2 个相同大小的缩略图 200 x 200，如果我放大屏幕尺寸，缩略图变成 400 x 400

【问题讨论】：

标签： html reactjs twitter-bootstrap

【解决方案1】：

试试这个

https://www.jqueryscript.net/layout/jQuery-Responsive-Equal-Height-Images.html

<div class="pack">
  <img src="http://via.placeholder.com/300x300"/>
  <img src="http://via.placeholder.com/450x150"/>
  <img src="http://via.placeholder.com/150x500"/>
  <img src="http://via.placeholder.com/300x300"/>
</div>

<!-- OR -->

<div class="pack">
  <figure>
    <img src="http://via.placeholder.com/300x300">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/300x500">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/600x150">
    <figcaption>Caption here</figcaption>
  </figure>
</div>

<link rel="stylesheet" href="jquery-packed-img-strip.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery-packed-img-strip.js"></script>

$(window).on('load', function() {
  $("div.pack").pack();
});

【讨论】：

【解决方案2】：

您可以参考以下链接。我在代码沙箱中创建了在流体网格中显示图像的沙箱。 https://codesandbox.io/s/github/tiny-tinker/FluidGrid

在项目中，有一个“GridImageViewer”组件接收“targetHeight”作为道具。该组件调整图像的高度以适合目标高度，因此图像大小将与原始大小不同。

【讨论】：