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

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

Answer 2

您需要使用 CSS 背景图片居中和裁剪图片。

<style>
    .image {
        background-position: center;
        width: 200px;
        height: 200px;
        float: left;
    }
</style>

<div class="image" style="background-image: url('http://lorempixel.com/400/200/sports/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/300/500/abstract/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/200/400/nature/');"></div>

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

How to resize the images to have the same height in group while keeping aspect ratio?

javascript

css

semantic-ui