CODEWITHSUNDEEP
imagetwitter-bootstrapcssthumbnailspositioning
Bipul Roy
Bipul Roy

Reputation: 566

how to fit a wide image in bootstrap thumbnail?

I have a four column row(col-md-3) row. Each column has a thumbnail of width-220px and height-360px.How can I fill/cover the thumbnail div with images of different resolution(such as: 1920X1080px or 2480 X 3508 px) ?

I have tried this: 

        <div class="thumbnail">
            <img  src="images/highres.jpg" alt="Nosmoking image">

        </div><!----End of thumbnail-->

    </div>

</div>

CSS:

           img{
        object-fit: cover;
    }

    .thumbnail{
        height: 360px;
        width: 220px;
        overflow:hidden;
    }

I have used an image of 1920X1080px (wide) and it's just filling the half of the thumbnail.what i want is to keep the aspect ratio and cover the thumbnail. what is the simplest solution?

Upvotes: 2

Views: 3240

Answers (1)

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

If I understand you correctly, there are some solutions, you can add different classes to each .thumbnail and add background image for each .thumbnail using CSS, but for now and for your current code, you can add this CSS and can resolve your problem:

.thumbnail > img{
   width:100%;
   height:100%;
}

EDIT:

If you want to keep the aspect ratio, I suggest adding suitable classes to your .thumbnail HTML element, then add the image using CSS background.

imagine this:

HTML:

<div class="thumbnail thumbnail-1"></div>
<div class="thumbnail thumbnail-3"></div>
<div class="thumbnail thumbnail-4"></div>

CSS:

.thumbnail {
  background-size:cover;
  backgrond-repeat:no-repeat;
}

.thumbnail-1{
  background-image:url("image1.jpg")
}

.thumbnail-2{
  background-image:url("image2.jpg")
}

.thumbnail-3{
  background-image:url("image3.jpg")
}

Upvotes: 1

Related Questions