How can I center an inside a div and have it scale with the div's height?

Question

I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.

Example:

* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *

HTML

<div class="container">
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>

CSS:

.container {
    height:250px;
    width:50%;
}
.derp{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB

The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.

I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.

If it's a background, why not use CSS backgrounds (with background-scale, background-position, etc). — GolezTrol, Aug 14 '15 at 22:04
@marc Each element will use a different URL and I'm trying to avoid using background-images since they'll had a high number of CSS rules. — acwr, Aug 14 '15 at 22:38

score 1 · Accepted Answer · answered Aug 14 '15 at 22:01

In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:

    .derp{
        height:80%;
        width:80%;
        margin:10%;
     }
.container {
    height:250px;
    width:50%; /* needed */
    /* inner img is centered horizontally */
    vertical-align:top;
    text-align:center;
    overflow-x:hidden;
}

<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>

Is there a way to maintain aspect ratio with the width of the image's overflow being hidden? — acwr, Aug 14 '15 at 22:40
Yes - add `object-fit: cover;` to the derp class, as pentz advised. — A. Abramov, Aug 14 '15 at 22:45

pentzzsolt · Answer 2 · 2015-08-14T22:37:05.890

Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.

You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.

I made a little demo on CodePen that shows you how it works.

img {
  height: 100%;
  object-fit: fill;
  width: 100%;
}

score 0 · Answer 3 · edited May 23 '17 at 12:30

The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.

The hard part is centering horizontally. You can try this answer :css to center a image horizontally.

However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.

How can I center an inside a div and have it scale with the div's height?

3 Answers3