CODEWITHSUNDEEP
htmlcssimage
tkss
tkss

Reputation: 175

Responsive Images in thumbnails and Image Dimensions

I'm trying to practice HTML & CSS by recreating templates and I'm having a lot of trouble with the height of the image inside the thumbnail.

You can see here: 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%;
    }
}

The main problem is that in the first section the photos maintain the aspect ratio and still look crisp as I resize the browser window, but they're not all the same height.

In the second section I use inline styling with width and height so that they keep the same height but the pictures get distorted as I stretch the browser.

I tried wrapping the images in a div and doing overflow:hidden, but no luck.

How do I go about this?

Follow up questions about image dimensions

All of the photos that I used contain different image dimensions. Am I supposed to crop these images before using them to all have the same dimensions?

Also I read on internetingishard.com that inline styling an image width or height for content purposes is one of the rare cases where you'd use inline styling, but am I using it wrong in this case? Should it match the actual dimensions of the image and not match the dimensions that I want that element to be?

Upvotes: 2

Views: 139

Answers (1)

Saravana
Saravana

Reputation: 3496

try below for your image section

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

}

Upvotes: 1

Related Questions