Ridimensiona l'immagine mantenendo le proporzioni, quindi centra verticalmente e orizzontalmente all'interno dell'altezza e della larghezza del fluido DIV

Question

OK, questo è un po 'un boccone e molto super-specifico. Farò del mio meglio per spiegare!

L'obiettivo è mantenere le proporzioni durante il ridimensionamento di un'immagine e mantenerlo verticalmente e orizzontalmente centrato all'interno di un DIV definito solo da percentuali. L'immagine deve mantenersi ottimale, quindi se è richiesta la larghezza massima, viene utilizzata e viceversa.

Usa Firefox versione 33 (o un paio di versioni precedenti) per visualizzare questo js violino vederlo lavorare correttamente:

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

Il problema:

Originariamente ho trovato il mio codice qui su StackOverflow e ha fatto un semplice mod-max altezza/larghezza aggiungendo alla classe .centered. Al momento, questo ha funzionato in tutti i principali browser. L'unica eccezione è l'Opera.

Vertically align an image inside a div with responsive height

C'è un grosso problema però: l'ultima versione di Chrome (versione 38.0.2125.111) non funziona più con questo codice e miei utenti preferiscono Chrome per altri browser con un ampio margine.

Qualche idea su come risolvere questo? È un bug con Chrome? Sono aperto a suggerimenti javascript per farlo funzionare di nuovo.

Answer 1

Date un'occhiata a CSS object-fit proprietà:

Potrebbe essere necessario un polyfill per browser meno recenti, però.

View browser support per l'accoppiamento di oggetti.

Answer 2

sono arrivato fino a questo: 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>

L'immagine rimane centrata sia orizzontalmente che verticalmente. Se la finestra viene ridimensionata, l'immagine si restringe rispettando le proporzioni originali.

Tuttavia, non l'ho provato su tutti i browser.