How to crop an image on the right to match the width of a containing element?

Question

I searched the internet, but couldn't find the exact solution.

If I have an image like this:

=====/     /====================================

I am looking to get a result like this:

=====/     /=====

Not resized, not centered, only cropped on the right to match the width of the containing div.

How can I do this?

Answer 1

One way to achieve this would be using the image as a background of the crop element, instead of a separate element within itself.

For example:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
    background: url('some-path/some-image-to-be-cropped');
}

See JSFiddle demo