How to Center an Image If It's Wider Than Its Container

How do I center an image if it's wider than its container?

HTML

​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>​

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

jQuery

$(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

​

See it on jsFiddle: http://jsfiddle.net/4eYX9/30/

How to center an image that is wider than the browser window (not a background image)

<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

This... probably will get you where you want.

and the example: fiddle and source

Edit

fixed it: fiddle and source

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

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.

center image that is bigger than the containing div

Use Flex for simple, as your question, assume image free size (No CSS set)

.thumbnail {
    height: 600px;
    width: 60%;
    overflow: hidden;  
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail {    height: 600px;    width: 60%;    overflow: hidden;    display: flex;  align-items: center;  justify-content: center;}

<div style="width: 300px;"><div class="thumbnail"><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /></div></div>

.item img {
    left: 50%;
    margin-left: -383.5px; /* Half of the width */
    min-width: 767px;
    position: absolute;
}

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

.div img {
    display: block;
    height: inherit;
    margin: auto;
    max-width: none;
    width: initial;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}