CSS center cropped image of variable dimensions

Question

I am trying to display a cropped center area of an image and have it work for different size images.

I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.

What I'd like is to display the center part of the image and have the left and right sides of the image hidden.

Answer 1

Hi, I'd go with the approach of making it a background image

.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}

<div class="imghider">&nbsp;</div>

As for different sizes you could use several classes or CSS expressions (or server side css generation)

I hope this helps.