Jak dopasować obraz w rozmiarze obrazu div rozmiar jest max następnie div lub min następnie div

Question

Jak dopasować obraz w dziale? Rozmiar obrazu może wynosić max, a następnie div lub min, a następnie div.

kod html

<div class="main"> 
    <img scr="image.jpg"> 
</div> 

kod CSS

.main{ 
    height:200px; 
    width:200px; 
} 

img{ 
    // answer code 
} 

Jak ustawić zdjęcie css z następujących powodów:

1. wysokość obrazu 100 i szerokości 100
2. wysokości obrazu 300 szerokość 300

Answer 1

można użyć: -

img { max-width: 100%; height: auto; } // This would help you to automatically fit the image. 

EDIT:

Powyższy kod CSS by pomóc dla obrazów, których rozmiar jest większy niż div. Ale nie pasuje do obrazów, które są mniejsze niż div. Trochę JQuery byłyby potrzebne do achive swój cel, należy go znaleźć poniżej: -

$(document).ready(function(){ 
    imageWidth = $('.main img').width(); 
    parentWidth = $('.main').width(); 
    if (imageWidth > parentWidth) { 
     $('.main img').css('width', '100%'); 
    } 
}); 

Co się dzieje, gdy obraz jest mniejszy niż div to się zmienia rozmiar i pasuje do div jak na swoje wymagania.

Dlatego też należy umieścić skrypt CSS, jak również skrypt dla obu warunków.

Answer 2

Jeśli obraz jest zawsze kwadrat a potem po prostu dodać img{ width: 200px; height: 200px; }

jeśli nie, to

.main { 
    width: 200px; 
    height: 200px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
} 
img { 
    max-width: 200px; 
    max-height: 200px; 
    /* IE7 doesn't support display: table-cell property? so hack */ 
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');  } 

to sprawdzić tutaj http://jsfiddle.net/qBDT4/1/