Scale image maintaining aspect ratio, then center vertically and horizontally inside fluid height and width DIV

Question

OK, this is a bit of a mouthful and very super specific. I will try my best to explain!

The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.

Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:

http://jsfiddle.net/3vr9v2fL/1/

HTML:

<div id="imageviewer" >

<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg"  alt="Doctor Concentrating on Work"></img>
</div> 

</div>

</div>

CSS:

#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}


#imageviewer{
position:relative;
width:100%;
height:100%;
}





.responsive-container {

position: relative;
width: 100%;
border: 1px solid black;
}


.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a;       /* Hide the characters like spaces */
}

.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}

.centered {

vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}

The Problem:

I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.

Vertically align an image inside a div with responsive height

There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.

Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.

Lebar

Answer 1

I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container

.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
}

<div class='container'>
    <img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>

The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.

I didn't test it on all browsers though.

Kashmir

I used the same solution. But on a large screen, the image does not take the full width/height of the container though. Would be great if you could revise your answer. – Griffis

Answer 2

Take a look at CSS object-fit property:

You may need a polyfill for older browsers, though.

View browser support for object-fit.

Nakashima