缩略图和图像尺寸中的响应式图像

Question

我正在尝试通过重新创建模板来练习 HTML 和 CSS，但我在缩略图中的图像高度方面遇到了很多问题。

你可以在这里看到：https://codepen.io/broccoliman/full/rpEePL/

  .desttwo{
    margin-bottom: 30px;
}

.dest-card{  
    width: 320px; 
    /* height: auto; */
    margin-bottom: 90px;
    position: relative;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.30);
}

.dest-card__image{
    max-width: 100%;
    /* height: auto; */

} 

.destinations{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.flex-card{
    max-width: 1100px;
    display:flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
}


@media only screen and (max-width: 800px){
    .flex-card{
        flex-direction: column;
        align-items: center;
    }

    .dest-card{
        width: 100%;
    }

    .dest-card__image{
        width: 100%;

    }
}

@media only screen and (min-width: 801px) and (max-width: 1099px){
    .flex-card{
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .dest-card{
        width: 45%;
    }

    .dest-card__image{
        width: 100%;
    }
}

主要问题是在第一部分中，照片保持纵横比，并且在我调整浏览器窗口大小时仍然看起来很清晰，但它们的高度并不完全相同。

在第二部分中，我使用具有宽度和高度的内联样式，以便它们保持相同的高度，但是当我拉伸浏览器时图片会变形。

我尝试将图像包装在一个 div 中并进行溢出：隐藏，但没有运气。

我该怎么做？

跟进有关图片尺寸的问题

我使用的所有照片都包含不同的图像尺寸。我应该在使用它们之前裁剪这些图像以使其具有相同的尺寸吗？

另外，我在 internetingishard.com 上读到，内联样式为内容目的的图像宽度或高度是您使用内联样式的罕见情况之一，但在这种情况下我使用错了吗？它是否应该与图像的实际尺寸匹配，而不是与我希望该元素的尺寸匹配？

Answer 1

试试下面的图片部分

.dest-card {height: 250px;}
.dest-card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  -o-object-fit: cover;

}