Как поместить изображение в div размер изображения изображения max, затем div или min, затем div

Question

Как мне подобрать образ в div? Размер изображения может быть максимальным, а затем div или min, затем div.

HTML код

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

CSS код

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

img{ 
    // answer code 
} 

Как установить CSS изображения со следующим:

1. высоты изображения 100 и шириной 100
2. высоты изображения 300 и ширина 300

Answer 1

Вы можете использовать: -

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

EDIT:

Приведенный выше код CSS поможет вам для изображений, размер которых больше, чем дел. Но не подходит для изображений, которые меньше, чем div. Немного JQuery будет необходимо для того чтобы достигнуть своей цели, пожалуйста, найти его ниже: -

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

Что происходит, когда изображение меньше DIV он изменяет свои размеры и подходит к DIV согласно вашему требованию.

Следовательно, поместите css, а также скрипт, чтобы работать для обоих условий.

Answer 2

Если изображение всегда квадрат, то просто добавьте img{ width: 200px; height: 200px; }

, если нет, то

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

проверить его здесь http://jsfiddle.net/qBDT4/1/