Cómo caber una imagen en div wather tamaño de la imagen es máximo entonces div o min luego div

Question

¿Cómo encajo una imagen en div? El tamaño de la imagen puede ser máximo, luego div o min, luego div.

código html

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

código CSS

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

img{ 
    // answer code 
} 

¿Cómo puedo configurar css imagen con lo siguiente:

1. altura de la imagen 100 y la anchura 100
2. altura de la imagen 300 y ancho 300

Answer 1

Se puede utilizar: -

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

EDIT:

el código CSS anterior le ayudaría para las imágenes cuyo tamaño es mayor que el div. Pero no se ajusta a las imágenes que son más pequeñas que el div. Sería necesario un poco de jQuery para achive su objetivo, por favor, encontrar a continuación: -

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

Lo que pasa es que la imagen es más pequeño que el div se cambia el tamaño en sí y se adapta a la div como por su exigencia.

Por lo tanto, coloque el CSS así como la secuencia de comandos para trabajar en ambas condiciones.

Answer 2

Si la imagen es siempre cuadrada entonces sólo tiene que añadir img{ width: 200px; height: 200px; }

si no, entonces

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

comprobar que funciona aquí http://jsfiddle.net/qBDT4/1/