html - Center a large image of unknown size inside a smaller div with overflow hidden

Question

I would like to center an img inside a div without javascript and without background-images.

Here is some example code

<div> 
    <img src="/happy_cat.png"/> 
</div>

• I don't know the size of the img and it should be able to exceed the width of the parent
• I don't know the width of the parent div (it is 100%)
• The parent div has a fixed height
• The image is larger than the parent and the parent has overflow:hidden
• Only need to support modern browsers

Desired result. (Ignore opacities etc, just note the positioning).

I know this can be done easily with background images but that isn't an option for me. I could also use javascript but it seems like a very heavy handed way to achieve this.

Thanks!

Jack

Answer 1

What about this:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

This assumes that the parent div is positioned relatively. I think this works if you want the .img relatively positioned rather than absolutely. Just remove the position: absolute and change top/left to margin-top and margin-left.

You'll probably want to add browser support with transform, -moz-transform etc.