0

I am trying to get an image horizontally and vertically centered within a div of variable height and width. So far, so good.(See jsfiddle links below)

Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.

After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:

1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:

http://jsfiddle.net/me2loveit2/ejbLp/8/

HTML

<div class="overlay">
    <div class="helper"></div>
    <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>

CSS

.helper {
    height:50%;
    width:100%;
    margin-bottom:-240px;
    min-height: 240px;
}
.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
}
img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:

http://jsfiddle.net/me2loveit2/ejbLp/9/

HTML

<div id="outer">
    <div id="container">
        <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
    </div>
</div>

CSS

#outer {
    height:100%;
    width:100%;
    display:table;
    position:fixed;
    top:0px;
    left:0px;
    background-color: rgba(0, 0, 0, 0.5);
}
#container {
    vertical-align:middle;
    display:table-cell;
    max-width: 100%;
    max-height: 100%;
}
img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    display:block;
}
Philipp Werminghausen
  • 1,142
  • 11
  • 29

1 Answers1

1

I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: table;
}

.container {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #f00;
}

.container > div {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #00f;
    max-width: 550px;
    max-height: 480px;
    background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
    background-size: contain;
}

<div class="container"><div></div></div>

http://jsfiddle.net/pYzBf/1/

Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.

Community
  • 1
  • 1
LGT
  • 4,957
  • 1
  • 21
  • 22
  • This is nice, but I need the image to not scale larger than it is, only smaller on smaller windows. It should remain horizontally and vertically centered, just like in my examples. – Philipp Werminghausen Jun 18 '14 at 16:38
  • I played around again and managed to combine a working fiddle using your method of a background instead of an image: http://jsfiddle.net/me2loveit2/ejbLp/11/ – Philipp Werminghausen Jun 18 '14 at 16:48
  • I need to look for another solution as well. This will only work for images and not any other media like video or flash. – Philipp Werminghausen Jun 18 '14 at 17:13