Vertical centering an image in a smaller div (multiple scaled images, multiple divs)

Question

I have two images. One is 630x419; the other is 200x300.

I have each of these images displayed inside a container div with a fixed width on the container. I'm scaling the images to width: 100% inside the container div. Both images scale to fill the div width, but the image that is taller than it is wide (200x300) overflows down past the bottom of the div container. I have set the overflow to hidden, but what I would like to do is vertically center the image in the div so that I can see the center of the image instead of the top of the image without messing up the scaling or display of the first image.

JSFiddle example here: http://jsfiddle.net/P7xNg/1/

.container {
  padding: 9px;
  border: 1px solid #B8B8B8;
  width: 262px;
  margin: 10px;
}

.container img {
  display: block;
  width: 100%;
}

.image-box {
  overflow: hidden;
  height: 172px;
}

<div class="container">
  <div class="image-box">
    <img src="http://i.imgur.com/lG43Qgd.jpg" />
  </div>
</div>

<div class="container">    
  <div class="image-box">
    <img src="http://i.imgur.com/bMfYu6M.jpg" />
  </div>
</div>

Answer 1

.image-box {
    overflow: hidden;
    height: 172px;
    position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;

}
.image-box img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

http://jsfiddle.net/P7xNg/2/

Answer 2

A nice simple solution for you here.

All you have to do is instead of using the img tag create a div at the size you want the image to be. For example; 200px x 200px. Then allocate the image you want to use as a background image to that div, and then offset the image by -100px for example.

An inline example below:

<div class="container">    
    <div class="image-box">
        <div style="width:100%;height:200px;background-image:url(my-image.jpg);background-repeat:no-repeat;background-position:-100px 0px;
    </div>
</div>

I hope this helps!

Answer 3

You are dealing with two very different image orientations. The first one is landscape in nature, and scales fine given the container you've made. The second is portrait in nature, and it's height/width is making it difficult to fit the container for it.

There's not one set of styles I can see to make both work the way you want (unless you cropped image #2 into a landscape orientation in a graphics editor).

Add some inline CSS styling to your second image (in the HTML):

<div class="container">    
    <div class="image-box">
        <img src="http://i.imgur.com/bMfYu6M.jpg" style="margin-top:-120px;"/>
    </div>
</div>

This did the trick for me.

If you find you have many 'portrait-style' images like this, then it may be worth your while creating a class in your CSS like .img-portrait or something, and apply it to the ones you're having trouble with, to save you from all the inline styling you'd need to do:

Like <img src="http://i.imgur.com/bMfYu6M.jpg" class="img-portrait"> or something similar.

Answer 4

One option would be to use the image as a background for your .image-box rather than including an <img> tag as a child of the .image-box. You'd just need to set:

• background-image: url(blah);
• background-size: 100%;
• background-position: center center;

However, the resulting HTML isn't as clean as it will probably require some inline styles which are generally not the best.

A jsfiddle.