Rozmiar obrazu do pojemnika przy zachowaniu proporcji w CSS?

Question

Mam kilka obrazów o różnych (nieznanych) wymiarach.

Chcę upuścić te obrazy do elementu div i automatycznie dopasować je do wymiarów elementu div, zachowując ich proporcje.

Innymi słowy, jeśli obraz jest szerszy niż wysoki, szerokość będzie wynosiła 100%, a wysokość będzie odpowiednio skalowana. Jeśli obraz jest większy niż szeroki, wysokość będzie wynosiła 100%, a szerokość zostanie odpowiednio skalowana.

Czy jest jakiś sposób, aby to zrobić w czystej css?

Dzięki

Answer 1

Korzystanie z właściwości CSS max-width i max-height na obrazie będzie Ci gdzie trzeba być.

Fiddle

http://fiddle.jshell.net/sHAQ9/

HTML

<div>  
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/> 
</div> 
<div>  
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/> 
</div> 

CSS

div { 
    width: 150px; 
    height: 150px;  
    overflow: hidden; 
    background: #ccc; 
    margin: 10px; 
    text-align: center; 
    line-height: 150px; 
} 
div img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 

Answer 2

zrobić to z mojej konfiguracji galerii:

.ScaledImg { 
    max-width:100%: 
    max-height:100%; 
} 

IMG w celu dopasowania wymiarów jego rodzica/pojemniku na podstawie tego, przy zachowaniu proporcji. Nie próbowałem tego z niczym innego niż imgs, ale działa dobrze dla mnie. Nie są wymagane deklaracje width lub .

Answer 3

Spróbuj tego:

<style> 
    .fit_image img { 
     max-width: 100%; 
     max-height: 100%; 
    } 
    .fit_image { 
     width: 400px; 
     height: 200px; 
    } 
</style> 

<div class="fit_image"> 
    <img src="/path/to/image.jpg"> 
</div> 

Answer 4

podstawie @iambriansreed skrzypce,
Zastosowanie powiększenia na obrazie, gdy jest mniejszy niż pojemnika

div img { 
    zoom: 10; 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 

http://fiddle.jshell.net/vcapr0k8/