我正在从数据库加载 250 个元素，我需要img为每个元素进行渲染。
不幸的imgs是，有两种不同的尺寸：
我无法对其进行硬编码，因为我不知道这些图像元素将以什么顺序来自服务器。
这是我的 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>如何在不失真的情况下使它们的尺寸相似？ …