Question

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

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

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

如何在没有图像失真的情况下使它们相似？

这是期望的效果：

Answer 1

使用高度和宽度的最大值，并同时使用auto，以便正确缩放：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: