CSS - jak zrobić pojemnik szerokość i wysokość obrazu stałe auto rozciągnięte

Question

mam iść trochę kodu HTML tak:

<div class="item"> 
    <img src="..."> 
</div> 

i CSS kodu tak:

img { 
    max-width: 100%; 
    height: auto; 
} 

.item { 
    width: 120px; 
    height: 120px; 
    height: auto; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

Co chciałbym zrobić, to zrobić obraz IMG za pomocą szerokości div i rozciągnąć jego wysokość. Chcę również, aby div rozciągnął się, by pasował do img. Czy to jest możliwe?

Answer 1

co szukasz jest min-height i max-height.

img { 
    max-width: 100%; 
    height: auto; 
} 

.item { 
    width: 120px; 
    min-height: 120px; 
    max-height: auto; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

Answer 2

Spróbuj width:inherit aby obraz ma szerokość od jego pojemnik <div>. Będzie rozciągać/zmniejszać swoją wysokość, aby zachować proporcje. Nie ustawiaj wysokości w rozmiarze <div>, ponieważ będzie ona dopasowywana do wysokości obrazu.

img { 
    width:inherit; 
} 

.item { 
    border:1px solid pink; 
    width: 120px; 
    float: left; 
    margin: 3px; 
    padding: 3px; 
} 

JSFiddle example

Answer 3

Nie, nie można dokonać na odcinku img aby pasował do div, a jednocześnie osiągnąć odwrotny. Miałbyś nieskończoną pętlę zmiany rozmiaru. Możesz jednak wziąć notatki z innych odpowiedzi i zaimplementować minimalne i maksymalne wymiary, ale to nie było pytanie.

Musisz zdecydować, czy obraz zostanie przeskalowany w celu dopasowania jego rodzica lub jeśli chcesz, aby rozwinąć div, aby dopasować swoje dziecko img.

Stosując ten blok mówi mi chcesz rozmiar obrazu, aby być zmienna więc div rodzic jest szerokość obraz skaluje się. height: auto zamierza zachować proporcje obrazu w takcie. jeśli chcesz rozciągnąć wysokość, musi być 100%, jak to skrzypce.

img { 
    width: 100%; 
    height: auto; 
} 

http://jsfiddle.net/D8uUd/1/