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

Question

目前，查看带有图片的产品列表:

请注意，这些图片尺寸不同，例如宽度和高度不同，我不想让它看起来很糟糕，我正在寻找一种解决方案，如何在不影响宽高比的情况下正确调整它们的大小。异常(exception)的结果是这样的:

每个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');">