Question

Within a surrounding div I want to center an image. This image should have a forced size but without stretching. So if the div container is 100px*100px and the image 200px*200px, 50px should be cropped on each side.

In this question you can read how to force the size. But I don’t want the image to start on the bottom left but to center it. This is the question 🙂

This is how it is:

And this is how I want it to be:

Answer 1

Give the image a negative left margin. In this example, margin-left:-50px.

Edit: Or if you don’t know the width of the image, you can use the image as a background for the div.

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>