Koen Demonie Koen Demonie - 1 month ago 15
CSS Question

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%
}

Answer

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