javascript - 如何使两个不同大小的图像相似而不失真？

我正在从数据库中加载250个元素，并且需要为每个元素渲染img。

不幸的是，imgs有两种不同的尺寸：

桶381x760（px）
瓶272x1058（px）

我无法对其进行硬编码，因为我不知道这些图像元素将以什么顺序来自服务器。

这是我的Minimal, Complete, and Verifiable example

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.img {
  width: 50%;
}

<!DOCTYPE html>
<html>

<body>

  <h2>HTML Image</h2>
  <div class="wrapper">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215919/2_paabuv.png" alt="Mountain View">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215916/keg_quozwj.png" alt="Mountain View">

  </div>

</body>

</html>

如何使它们的尺寸相似而又不失真？

这是理想的效果：

最佳答案

对高度和宽度使用最大值，对两者都使用自动值，以便正确缩放：

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.img {
  height: auto;
  max-height: 250px;
  width: auto;
  max-width: 250px;
}

<!DOCTYPE html>
<html>

<body>

  <h2>HTML Image</h2>
  <div class="wrapper">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215919/2_paabuv.png" alt="Mountain View">
    <img class="img" src="https://res.cloudinary.com/dfe57evk4/image/upload/v1521215916/keg_quozwj.png" alt="Mountain View">

  </div>

</body>

</html>

如果需要（vh-vw或vmin-vmax），可以使用响应式测量。

关于javascript - 如何使两个不同大小的图像相似而不失真？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49325210/