Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Image / Viewport

Center Image In HTML Viewport (without JavaScript)

Post a Comment
I have an image I'd like to show in a browser such that: If the image is smaller than the browser viewport, the image is centered horizotally and vertically. If the image is large

Solution 1:

You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.

1. position:absolute; + margin:auto;

Support: crossbrowser

HTML

<html>
<body>
    <div id="container">
        <img src="your-image.jpg">
    </div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    position:relative;
}
#container > img {
    width:100%;
    max-width:400px; /* real image width */
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

Demo

2. display:table; + display:table-cell; + vertical-align:middle;

Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)

HTML

<html>
<body>
    <div id="container">
        <span> /* it's important that you use a span here
                  not a div, or the IE7 fallback won't work */
            <img src="your-image.jpg">
        </span>
    </div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    display:table;
    *display:block; /* IE7 */
}
#container > span {
    display:table-cell;
    *display:inline-block; /* IE7 */
    vertical-align:middle;
    text-align:center;
}
#container > span > img {
    width:100%;
    max-width:400px; /* real image width */
}

Demo

3. background-size:contain;

Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)

HTML

<html>
<body>
    <div id="container"></div>
</body>
</html>​

CSS

html,body,#container {
    height:100%;
}
#container {
    margin:0 auto;
    max-width:400px; /* real image width */
    background:url(your-image.jpg) 50% 50% no-repeat;
    background-size:contain;
}

Demo

Be careful for how IE8 renders height:auto;, may not keep the ratio.

Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that? 


Solution 2:

You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.

To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.


Solution 3:

You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.

Css

#container {
width: 1000px;
height: 1000px;
}

#img {
    background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}​

HTML

<div id="container">

<div id="img">

</div>

Edit

Set image as background? Then set the body to 100%.

body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}

Solution 4:

I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):

#mydiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 98%, cover;
}

So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.

Anyway, a JavaScript solution is better. Hope it helps.


Post a Comment for "Center Image In HTML Viewport (without JavaScript)"