CODEWITHSUNDEEP
css
Koen Demonie
Koen Demonie

Reputation: 539

crop image height without scaling

I know this is a easy question but i just can't seem to find the solution.

I am currently using a bootstrap carousel, with 1920x1080 res images. I want the image to stay the same, but the height to be cropped down to 480px. Note. NO SCALING.... the image should just be cut-off, no stretching or scaling.

lets say this is my css class:

.carousel-top-img{
    height: 480px;// image scaled down to 853x480px
}

.carousel-top-img{
    max-height: 480px;// image stretched but 1920x480px met
    width: 100%
}

Upvotes: 0

Views: 2335

Answers (2)

Nick Ribal
Nick Ribal

Reputation: 2109

Change the dimensions of .carousel-top-img's container and apply overflow: hidden to it.

Upvotes: 1

MSarandev
MSarandev

Reputation: 101

It doesn't use bootstrap, but here's a pure CSS solution:

#this_img{
        width: 1920px;
        height: 480px;
        object-fit: cover;
    }

A bit more on object-fit: LINK

I hope that helps

Upvotes: 7

Related Questions