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

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

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

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

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 для изображения, но не работает. Изображение передается из сервлета (он хранится за пределами папки Webapps Tomcat).

Ответы

Ответ 1

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

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

Отметьте http://jsfiddle.net/ErNeT/

Ответ 2

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

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

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

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

#ImageContainer img {
    width: 600px;
}

Ответ 3

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

Итак, чтобы сначала ограничить ширину тега img, вам необходимо преобразовать его в элемент встроенного блока

img.Image{
    display: inline-block;
}

Ответ 4

Попробуйте это

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

Ответ 5

Ваш css почти прав. Вам просто не хватает display: block; в изображении css. Также одна опечатка в вашем id. Это должно быть <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>

Ответ 6

Я вижу, что это не ответили как окончательный.

Я вижу, у вас есть максимальная ширина как 100% и ширина как 600. Переверните их.

Простой способ также:

     <img src="image.png" style="max-width:600px;width:100%">

Я использую это часто, и тогда вы можете управлять отдельными изображениями, и не иметь его на всех тегах img. Вы можете CSS это также, как показано ниже.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">