Koen Demonie Koen Demonie - 1 year ago 99
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:

height: 480px;// image scaled down to 853x480px

max-height: 480px;// image stretched but 1920x480px met
width: 100%

Answer Source

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

        width: 1920px;
        height: 480px;
        object-fit: cover;

A bit more on object-fit: LINK

I hope that helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download