it-swarm.com.ru

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

На моем веб-сайте я хотел бы отображать загруженные пользователем изображения в новом окне с определенным размером (width: 600px). Проблема в том, что изображения могут быть большими. Поэтому, если они больше этих 600px, я бы хотел изменить их размер, сохранив соотношение сторон.

Я попробовал CSS-свойство max-width, но оно не работает: размер изображения не меняется.

Есть ли способ решить эту проблему?

HTML:

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS:

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

Я также попытался установить max-width: 600px для изображения, но не работает. Изображение передается из сервлета (оно хранится вне папки веб-приложений Tomcat).

62
user1315305

Вы можете написать так:

img{
    width:100%;
    max-width:600px;
}

Проверьте это http://jsfiddle.net/ErNeT/

101
sandeep

Проблема в том, что тег img является встроенным элементом, и вы не можете ограничить ширину встроенного элемента.

Поэтому, чтобы сначала ограничить ширину тега img, вам необходимо преобразовать его в элемент inline-block.

img.Image{
    display: inline-block;
}
3
Kamlesh Uikey

Учитывая ширину вашего контейнера 600px.

Если вы хотите, чтобы внутри помещались только изображения большего размера, добавьте: CSS:

#ImageContainer img {
    max-width: 600px;
}

Если вы хотите, чтобы ВСЕ изображения занимали свободное место (600 пикселей):

#ImageContainer img {
    width: 600px;
}
3
Leo Armentano

Попробуй это

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}
1
krish

Ваш CSS почти правильно. Вам просто не хватает display: block; в изображении css. Также одна опечатка в вашем удостоверении личности. Это должен быть <div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>
0
Rhythm Ruparelia