Question

I’m trying to display pre-set image thumbs without stretching or shrinking the image. My HTML looks like this:

<div class="container">
    <img src="photo.jpg" alt="Test Photo" class="clipped" />
</div>

My CSS:

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
}

.container img.clipped {
    width: 100%; 
}

I would expect to see the center of the image in a 75 x 75 pixel container like below, i.e. vertically centered.

Any idea what I’m missing?

Answer 1

The images starts resizing from the top-left corner of the box, so only its bottom part is cut out.

You can achieve that result moving the image to the background:

Demo – Warning: won’t work on IE8

HTML:

<div class="container"></div>​

CSS:

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}​

---

To apply this method to multiple containers, you can split it in two classes:

.container {
    height: 75px;
    width: 75px; 
    overflow: hidden;
}​

.myPic {
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

Then you can have:

<div class="container myPic"></div>​
<div class="container2 myPic"></div>​
<div class="container myPic2"></div>​
<div class="container2 myPic2"></div>​

…and so on.

OR you can set the background-image with an inline style:

.container {
    /* same stuff */
    background-position: left center;
    background-repeat: no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

And

<div class="container" style="background-image:url(photo.jpg);">
<div class="container" style="background-image:url(photo2.jpg);">