Adatta immagine all'interno div senza stretching

Question

Ho bisogno di adattare un'immagine all'interno di un div 300x300 senza allungare l'immagine. Ho visto questo sul post Huff, il cursore in questa pagina:

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

Le immagini vengono tagliati, ma non allungato. Invece di usare larghezza massima, altezza massima.

Come posso fare?

Answer 1

Quelle immagini sul sito a cui è collegato sono dimensioni reali, quindi la semplice risposta è solo per ridimensionare l'immagine.

Non è possibile eseguire questa operazione senza "allungare" l'immagine se l'immagine risulta inferiore a 300 px o alta, ma è possibile farlo senza modificare il rapporto, che è ciò che penso si intenda.

Ecco l'idea di base:

<div><img></div> 

Se si desidera utilizzare 300px come larghezza minima (si aspetta piccole immagini che hanno bisogno di essere più grande), provate questo:

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
} 
div img { 
    min-width:100%; 
} 

Demo: http://jsfiddle.net/Z47JT/

Se si desidera ritagliare le immagini (perché ci si aspetta che siano grandi) ma non ingrandirle, provare questo:

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
    position:relative; 
} 
div img { 
    position:absolute; 
} 

Demo: http://jsfiddle.net/Z47JT/1/

combinare entrambi queste tecniche, se si desidera.

Un altro modo è semplicemente utilizzare background-image sul contenitore, ma il ridimensionamento (se si desidera allungare le immagini più piccole) sarà difficile a meno che non si utilizzi background-size che non è completamente supportato. Altrimenti, è un'ottima soluzione facile.

Answer 2

utilizzare la soluzione Box Flex

Ecco l'html,

<div><img /></div> 

aggiungere stili

div{ 
    width:100%; 
    height:250px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden 
} 
div img{ 
    flex-shrink:0; 
    -webkit-flex-shrink: 0; 
    max-width:70%; 
    max-height:90%; 
}