Forza un'immagine per adattarsi e mantenere le proporzioni

Question

Voglio un'immagine per riempire il 100% della larghezza del suo contenitore, e voglio che abbia una proprietà di massima altezza impostata, tutto questo mantenendo le proporzioni ma permettendo di perdere qualsiasi parte dell'immagine.

img { 
    max-height:200px; 
    width:100%; 
} 

so una cosa simile può essere fatto con background-size proprietà, ma voglio fare questo per un <img> tag in linea.

Qualche idea su come potrei ottenere questo utilizzando i CSS? o javascript?

Answer 1

Si può provare CSS3 object-fit, e vedere il supporto del browser tables.

CSS3 object-fit/object-position Metodi di specifica come un oggetto (immagine o video) dovrebbe adattarsi all'interno sua scatola. le opzioni di adattamento dell'oggetto includono "contenere" (adattarsi secondo il rapporto ), "riempire" (allunga l'oggetto da riempire) e "coprire" (overflow casella ma mantiene il rapporto), dove posizione dell'oggetto consente all'oggetto di essere riposizionato come fa l'immagine di sfondo.

JSFIDDLE DEMO

.container { 
 
    width: 200px; /*any size*/ 
 
    height: 200px; /*any size*/ 
 
} 
 

 
.object-fit-cover { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; /*magic*/ 
 
}

<div class="container"> 
 
    <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"> 
 
</div>

---

Informazioni relative al viaggio:

• Exploring object-fit ★ Mozilla Hacks

• Polyfill for CSS object-fit property