Question

我正在尝试练习HTML＆amp; 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;

}

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

1 个答案: