Come adattare un'immagine a un'immagine di divisione, la dimensione dell'immagine è max, quindi div o min, quindi div

Question

Come si inserisce un'immagine in div? Le dimensioni dell'immagine possono essere al massimo quindi div o min, quindi div.

codice html

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

codice CSS

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

img{ 
    // answer code 
} 

Come impostare un'immagine css con i seguenti:

1. altezza dell'immagine 100 e larghezza 100
2. altezza dell'immagine 300 e larghezza 300

Answer 1

È possibile utilizzare: -

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

EDIT:

il codice CSS sopra di voi avrebbe aiutato per le immagini cui dimensione è più grande della div. Ma non andrà bene per le immagini che sono più piccole del div. Un po 'di JQuery sarebbe necessaria per achive il vostro obiettivo, si prega di trovare qui sotto: -

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

Che cosa accade è quando l'immagine è più piccola del div che si ridimensiona e si adatta al div secondo il vostro requisito.

Quindi posizionare il css e lo script in modo che funzionino per entrambe le condizioni.

Answer 2

Se l'immagine è sempre piazza poi basta aggiungere img{ width: 200px; height: 200px; }

se non, allora

.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');  } 

verificarlo qui http://jsfiddle.net/qBDT4/1/