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

Question

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

Here is a sample code

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

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

Desired result. (Ignore opacity, etc., just pay attention to positioning).

I know that this can easily be done using background images, but this is not an option for me. I could also use javascript, but this seems like a very hard way to achieve this.

Thank!

Jack

Answer 1

How about this:

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

This assumes the parent div is relative. I think this works if you want .IMG to be relatively positioned, and not quite. Just remove position: absolute and change the top / left side to margin-top and margin-left .

You might want to add browser support with transform , -moz-transform , etc.

Answer 2

Old question, new answer:

When the image is larger than the wrapping div, center alignment: center or margin: auto will not work. But if the image is smaller, then solutions with absolute positioning or a negative left margin will create strange effects.

So, when the size of the image is not really known in advance (for example, on CSM), and it can be larger or smaller than the div for wrapping, there is an elegant CSS3 solution that serves all purposes:

 div { display: flex; justify-content: center; height: 400px; /* or other desired height */ overflow: hidden; } img { flex: none; /* keep aspect ratio */ } 

Note that depending on other rules in the stylesheet, you may need to add the width: auto and / or max-width: none to img.

Answer 3

It is always a little complicated, and there are many solutions. I believe that the best solution would be the following. This centers it both vertically and horizontally.

CSS

 #container { height: 400px; width: 400px; } .image { background: white; width: 100%; height: 100%; position: relative; overflow: hidden; } .left { width: 100px; height: 100%; z-index: 2; background: white; top: 0px; position: absolute; left: 0px; } .right { width: 100px; height: 100%; z-index: 2; position: absolute; background: white; top: 0px; right: 0px; } .image img { margin: auto; display: block; } 

HTML

  <div id="container"> <div class="image"> <div class="left"></div> <div class="right"></div> <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" /> </div> 

See violin

slightly different method: fiddle

Answer 4

Thank you all for your help. I'm going to find this unreachable only in CSS.

I will move on to jQuery solution. Here are some [pseudo] code for those interested.

I was about to abandon the CSS solution, but it seems like it can be done (see accepted answer). Here is the JS solution I was going to go with.

 var $img = $('img'), w = $img.width(); $img.css({marginLeft: -w}); 

And the accompanying css

 img{ position:absolute; left:50%; } 

Answer 5

I know this is old, but I also came up with a clean css solution, very similar to the one above.

 .parent { float: left; position: relative; width: 14.529%; // Adjust to your needs } .parent img { margin: auto; max-width: none; // this was needed for my particular instance position: absolute; top: 11px; right: -50%; bottom: 0; left: -50%; z-index: 0; } 

Answer 6

Just initialize the image position as follows.

HTML:

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

CSS:

 #img { left: 0; right: 0; } 

Or look with margin: auto;

This is for horizontal alignment. To align it vertically, you can do display: table-cell; on <div> and then vertical-align: middle; but this is not a good practice because your <div> not a table.