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”作为道具。该组件调整图像的高度以适合目标高度，以使图像尺寸与原始图像不同。

创建大小相同的自适应图像库

2 个答案: