How to Center an Image That Is Wider Than the Browser Window (Not a Background Image)

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

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 image which is bigger than screen?

Your best option is using the images as background, but if you want/need to use the image, do it like this

.banner{overflow:hidden; height:200px; width:100%; text-align:center;}
.banner img{width:100%; height:100%; margin:0 auto;}

How can I center an image of arbitrary size without resizing to the browser width? (Crop outside window for wide images)

You can use an img element which I see you prefer.

This snippet uses one of the methods you tried to center it - to get the left/right centering it moves the img to have the left as the center of the div, then moves it back by half its width.

It does not try centering vertically as the requirement seems to be to have the img height the full height of the banner, but this could of course be changed if wanted.

Note that to stop overflow being shown with a scrollbar the correct setting is overflow: hidden, not hide as in the given code.

.banner-container {
  display: block;
  position: relative;
  height: 450px;
  overflow: hidden;
}

.banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}

<div class="banner-container">
  <img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'

How to have a background image wider than the content area of a website (without scrollbars)

Set the min-width on the div containing the background image to the width of the content.

---

Related Topics