Skalieren Sie das Bild unter Beibehaltung des Seitenverhältnisses, dann zentrieren Sie vertikal und horizontal in Höhe und Breite der Flüssigkeit. DIV

Question

OK, das ist ein bisschen wie ein Mund und sehr super spezifisch. Ich werde versuchen mein Bestes zu erklären!

Ziel ist es, das Seitenverhältnis beizubehalten, während ein Bild skaliert und vertikal und horizontal in einem DIV zentriert wird, das nur durch Prozentangaben definiert wird. Das Bild muss am besten passen, wenn also die maximale Breite benötigt wird, wird es verwendet und umgekehrt.

Verwenden Firefox Version 33 (oder ein paar früheren Versionen) anzuzeigen diese js Geige, es zu sehen einwandfrei funktioniert:

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

Das Problem:

Ich fand ursprünglich meinen Code hier auf Stackoverflow und machte eine einfache mod Zugabe von max-Höhe/Breite auf die .centered Klasse. Zu der Zeit funktionierte das in allen gängigen Browsern. Die einzige Ausnahme ist Opera.

Vertically align an image inside a div with responsive height

Es ist ein großes Problem jedoch: die neueste Version von Chrome (Version 38.0.2125.111) funktioniert nicht mehr mit diesem Code und meine Nutzer bevorzugen Chrom zu anderen Browsern mit großem Abstand.

Irgendwelche Ideen, wie man das löst? Ist das ein Bug mit Chrome? Ich bin offen für JavaScript-Vorschläge, damit dies wieder funktioniert.

Answer 1

Werfen Sie einen Blick auf CSS object-fit Eigenschaft:

Sie ein polyfill für älteren Browser benötigen, though.

View browser support für Objekt-fit.

Answer 2

kam ich mit auf den Punkt: 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>

Das Bild horizontal und vertikal zentriert bleibt. Wenn das Fenster verkleinert wird, verkleinert sich das Bild unter Berücksichtigung des ursprünglichen Seitenverhältnisses.

Ich habe es nicht auf allen Browsern getestet.