Авторазмер изображений в DIV

Question

Итак, я создаю эту пользовательскую панель администратора, чтобы пользователи могли легко создавать собственные данные веб-сайта в виде коллекции шаблонов.Основная проблема, с которой я сталкиваюсь, связана с изображениями.На одном шаблоне есть div, размером 380 на 150 пикселей.Мой вопрос:

Есть ли способ автоматического изменения размера изображения, чтобы оно помещалось в элемент div, а также чтобы оно не растягивалось или не обрезалось?Я открыт для всех решений, но если это работает в IE, это было бы здорово.Заранее спасибо.

Answer 1

Да, это будет:

#your_div.div{
    width:380px;
    height:150px;
}
#your_div img{
    max-width:100%;
    max-height:100%;
}

Размер изображения может быть изменен, но не искажен, и у вас также может быть где-то некое «пустое» пространство, но это логически ожидаемо.

Answer 2

Вы можете использовать jQuery для достижения этой цели. Если изображения добавляются динамически (на лету), вы можете использовать .live () ...

$('.someDivClass').children('img').live(function(){

var desiredWidth = /* your own logic here */;
$(this).width(desiredWidth);

});

В качестве альтернативы, вы можете просто указать высоту изображения (или оба).