如何在保持縱橫比的同時調整圖像大小以使其具有相同的高度？

Question

目前，請查看帶有圖片的產品列表：

請注意這些照片是不同的大小，如不同的寬度和不同的高度，我不希望它看起來很糟糕，我正在尋找一個解決方案如何正確調整它們，而不會打擾縱橫比。 例外結果將是這樣的：

每個img都有CSS代碼段

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

如果我改變高度：自動到高度：200px，但它會破壞縱橫比：

如何在保持縱橫比的同時以相同的高度正確固定它們？

歡迎任何建議。

Answer 1

您可以將寬度設置為auto，這將使它們具有相同的高度，並保持縱橫比。 但是，它們的寬度會不同：

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