如何在保持纵横比的同时调整图像大小以在组中具有相同的高度？

Question

目前，请查看带有图像的产品列表：

请注意，这些图片的大小不同，例如不同的宽度和不同的高度，我不希望它看起来很糟糕，我正在寻找一种解决方案，如何在不影响纵横比的情况下正确调整它们的大小。例外的结果是这样的：

每个 img 都有一个 CSS 片段

   .ui.medium.image
   {
        width: 300px;
        height: auto;
        font-size: 1rem;
   }

如果我将 height: auto 更改为 height: 200px，但它会破坏纵横比：

如何在保持纵横比的同时以相同的高度正确修复它们？

欢迎任何建议。

Answer 1

您可以将宽度设置为自动，这将使它们的高度相同，并保持纵横比。但是，它们将具有不同的宽度：

   .ui.medium.image
   {
        width: auto;
        height: 200px;
        font-size: 1rem;
   }

最好的方法是使用背景图像代替。
例如：

.ui.medium.image {
  /*Image should be a div*/
  height: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

然后，您可以使用内联样式设置图像：

<div class="image" style="background-image:url('path/to/image.jpg');">