Vertical centering variable height image while maintaining max-width/height

Question

I want to center an image of unknown width/height on a page, while making sure that it shrinks if it is bigger than the page (i.e. use max-width/max-height).

I tried using the display:table-cell method, but max-width is ignored in Firefox for all elements within elements declared with display:table-cell. Is there a way to vertically center a variable-height element without using display:table-cell?

I can change the mark up. JavaScript is acceptable, but I cannot use JQuery (or any other JS library).

0b10011 · Accepted Answer · 2012-05-30T16:57:14.107

17

This should prove to work quite well... no JavaScript necessary :)

See the working demo on jsFiddle.

CSS

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

HTML

<img class="absoluteCenter" src="PATHTOIMAGE">

Note: This class can be used for anything quite easily. If you use this for something other than an image, make sure to add a TAG.absoluteCenter CSS rule with a max-height and max-width of your choosing (where TAG is the HTML tag you're using [e.g. div.absoluteCenter] and max-width/max-height is less than 100%).

edited May 30 '12 at 16:57

answered Jun 08 '11 at 19:34

0b10011

18,397
4
65
86

Are you sure? `margin:auto` works with `width` but doesn't look to work well with `height. At least in my tests in Chrome. – Mic Jun 08 '11 at 19:51
That's a very neat trick with the margin:auto - thanks! Here's the fiddle I made to test it: http://jsfiddle.net/Zygxq/ – Ben Hull Jun 08 '11 at 20:00
@Mic, yes, it works quite well with height. The trick is the position:absolute;top:0;bottom:0; (left:0;right:0; align horizontally). – 0b10011 Jun 08 '11 at 20:07
Wow this is awesome. I have never seen this trick elsewhere. Does this work for everything, i.e. not just a single-img? – Oliver Zheng Jun 08 '11 at 21:12
@MTsoul - Yes, it works for anything. For block elements, however, you have to set the width/height (they won't shrink to the content horizontally). All you have to do to get it to work is add TAG.absoluteCenter (or you can use a second class [.someClass.absoluteCenter] or id). Then, add the max-height and max-width and you're all set :) – 0b10011 Jun 09 '11 at 12:30
Amazing. Have been searching a long time for this! – ernesto Mar 02 '12 at 14:31

score 0 · Answer 2 · answered Jun 08 '11 at 19:22

Try something like this...

Demo: http://jsfiddle.net/wdm954/jYnk8/1/

$(function() {

    h = $('.img').height();
    w = $(window).height();

    if (h < w) { 
        $('.img').css('margin-top', (w - h) /2 + "px");
    }
    else {
        $('.img').height(w);
    }

});

(You can test different sizes by changing some CSS I have commented out.)

Mic · Answer 3 · 2011-06-08T19:56:49.590

Here is one way with javascript:

<html>
<head>
<style>
  html, body{
    height:100%;
    margin:0;
    border:0;
    padding:0;
    background:#000;
  }
  body{
    position:relative;
  }
  img{
    border:0;
    padding:0;
    margin:0 auto;
    max-width:100%;
    max-height:100%;
    display:block;
    position:absolute;
  }
</style>
</head>
<body>
  <img />
  <script>
    (function(){
      var imgs = [
          'http://farm3.static.flickr.com/2396/2078094921_ee60c42d0f.jpg',
          'http://farm6.static.flickr.com/5242/5353846171_9169f810dc_b.jpg',
          'http://farm6.static.flickr.com/5284/5336493514_8e41696b66_b.jpg'
        ],
        img = document.getElementsByTagName('IMG')[0],
        getStyle = function(elm){
          return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
        },
        bodyStyle = getStyle(document.body),
        toInt = function(pxSize){
          return +pxSize.replace(/px/,'');
        },
        chgImg = function(){
          img.src = imgs[i++ % imgs.length];
          img.onload = function(){
            var imgStyle = getStyle(img);
            img.style.left = ( toInt(bodyStyle.width)  - toInt(imgStyle.width) ) / 2 + 'px';
            img.style.top =  ( toInt(bodyStyle.height) - toInt(imgStyle.height) ) / 2 + 'px';
            img.onload = null;
          };
        },
        i = 0;

      chgImg();
      setInterval(chgImg, 3000);
    })();
  </script>
</body>
</html>

Vertical centering variable height image while maintaining max-width/height

3 Answers3

CSS

HTML

Linked

Related