StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You <strong><em>can</em></strong> 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 <code>div</code>.</p> <hr> <h2>1. <code>position:absolute;</code> + <code>margin:auto;</code></h2> <p><strong>Support</strong>: crossbrowser</p> <p>HTML</p> <pre><code><html> <body> <div id="container"> <img src="your-image.jpg"> </div> </body> </html> </code></pre> <p>CSS</p> <pre><code>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; } </code></pre> <p><a href="http://jsfiddle.net/gionaf/4kTDU/"><strong>Demo</strong></a></p> <hr> <h2>2. <code>display:table;</code> + <code>display:table-cell;</code> + <code>vertical-align:middle;</code></h2> <p><strong>Support</strong>: IE8+, all other browsers - with IE7 fallback (<a href="http://www.quirksmode.org/css/display.html#table">Source 1</a>) (<a href="http://caniuse.com/css-table">2</a>) (<a href="http://www.brunildo.org/test/img_center.html">3</a>)</p> <p>HTML</p> <pre><code><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> </code></pre> <p>CSS</p> <pre><code>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 */ } </code></pre> <p><a href="http://jsfiddle.net/gionaf/9GFXW/"><strong>Demo</strong></a></p> <hr> <h2>3. <code>background-size:contain;</code></h2> <p><strong>Support</strong>: IE9+, all other browsers - with vendor prefixes (<a href="http://www.quirksmode.org/css/background.html#t012">Source 1</a>) (<a href="http://www.css3.info/preview/background-size/">2</a>)</p> <p>HTML</p> <pre><code><html> <body> <div id="container"></div> </body> </html> </code></pre> <p>CSS</p> <pre><code>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; } </code></pre> <p><a href="http://jsfiddle.net/gionaf/Yb5Lb/"><strong>Demo</strong></a></p> <hr> <p>Be careful for how IE8 renders <code>height:auto;</code>, may not keep the ratio.</p> <hr> <p>Edit: i just realized that you wrote "<strong><em>without</em></strong> 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? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload