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

Question

我正在使用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

Answer 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();
});

Answer 2

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

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