Ridimensionamento dell'immagine CSS per adattarsi all'area non distorta

Question

C'è un modo con CSS o meno di fare un'immagine adatta in un'area. Diciamo che ho più immagini di dimensioni diverse e voglio che tutte si adattino a un div di 150px per 100px. Non voglio ridimensionare le immagini, anche se alcuni potrebbero essere alti e altri stretti. Voglio semplicemente che si adattino a quest'area con il resto nascosto.

Ho pensato di utilizzare overflow:hidden ma sembra non essere nascosto in IE6.

Qualche idea?

Marvelous

Answer 1

Si dovrebbe provare a utilizzare questo:

img{ 
    width: auto; 
    max-width: 150px; 
    height: auto; 
    max-height: 100px; 
} 

Edit: Sembra che IE6 non supporta le proprietà max-height max-width e. Tuttavia, è possibile implementare la soluzione proposta qui: max-width, max-height for IE6

Answer 2

Quando si dice "in forma in quest'area" con il resto nascosto, mi sembra che si desideri che l'immagine non venga ridimensionata e fondamentalmente si ritagli l'eccesso.

Potrei interpretare la domanda sbagliata, ma prova a vedere se produce l'effetto che stai cercando.

.img-holder { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.img-holder img { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="img-holder"> 
 
    <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" /> 
 
</div>

Answer 3

Questo non funziona in IE6 (come richiesto dalla OP), ma per completezza è possibile ottenere l'effetto desiderato nei browser più recenti utilizzando CSS3 di background-size:cover e impostare l'immagine come centrato immagine di sfondo. In questo modo:

div { 
    width:150px; 
    height:100px; 
    background-size:cover; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-image:url('somepic.jpg'); 
} 

Answer 4

Questo ha funzionato per me:

img.perfect-fit { 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; 
} 

Si cerca di fare un "perfetta" del contenitore, si estende per adattarsi i limiti mantenendo immagine proporzione. Non l'ho provato con IE6.

JSFiddle:http://jsfiddle.net/4zudggou/