Scale the aspect ratio of the image, then vertically and horizontally in height and width of the fluid DIV

Question

Well, this is a little sip and very super specific. I will try my best to explain!

The goal is to maintain aspect ratio when scaling an image and hold it vertically and horizontally in the center of the DIV, which is determined only by percentages. The image should support the best fit, therefore, if the maximum width is required, then it is used and vice versa.

Use Firefox version 33 (or several earlier versions) to view this js script so that it works correctly:

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%; } 

Problem:

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

Vertically align image inside div with high speed

However, there is a big problem: 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 wide margin.

Any ideas on how to solve this? Is this a bug with Chrome? I am open to javascript suggestions to redo this work.

Answer 1

I came up with the following: JSFiddle - a centered image keeps proportions in a variable resize 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 remains centered both horizontally and vertically. If the window is reduced, the image is compressed based on the original aspect ratio.

I have not tested it in all browsers.

Answer 2

Take a look at the CSS-fit property :

You may need polyfill for older browsers.

View browser support for object snap.