Як встановити максимальну ширину зображення в 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зображення, але не працює. Зображення передається з сервлету (воно зберігається поза папкою веб-додатків Tomcat).

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

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

Перевірте це http://jsfiddle.net/ErNeT/

Я бачу, що на це не відповіли остаточно.

Я бачу, у вас максимальна ширина 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">

Проблема в тому, що тег img є вбудованим елементом, і ви не можете обмежити ширину вбудованого елемента.

Отже, щоб спочатку обмежити ширину тегу img, вам потрібно перетворити його в елемент inline-block

img.Image{
    display: inline-block;
}

Враховуючи ширину вашого контейнера 600px.

Якщо ви хочете, щоб всередині розміщувалися лише більші зображення, ніж це, додайте: CSS:

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

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

#ImageContainer img {
    width: 600px;
}

Спробуйте це

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

Ваш css майже правильний. Вас просто не вистачає display: block;в image 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>