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

85

На своем веб-сайте я хотел бы отображать загруженные пользователем изображения в новом окне с определенным размером ( 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).

— user1315305
источник

1

если вы хотите, чтобы он автоматически уменьшался, просто установите max-width, не устанавливайте, max-heightи он должен работать. Если нет, опубликуйте свой код, чтобы другие помогли вам определить проблему.

— Ray Cheng

2

Я просто попробовал ваш пример, и здесь он работает. Вы уверены, что в вашем реальном html ("ImageContainerr") нет такой же опечатки, как здесь, в этом примере?

— Mr Lister

Блин, ты прав. Я перезапустил свой Tomcat и браузер, попытался снова - и он действительно отлично работает. В любом случае, спасибо :) Опечатки не было - я изменил здесь идентификатор и имя класса, чтобы было легче понять.

— user1315305

3

Исходя из этого, я бы предположил, что вы не используете Firebug или другие инструменты разработчика. Я предлагаю вам обзавестись Firebug и научиться им пользоваться. (Изучив эти два элемента, вы бы увидели, что ширина не была добавлена к контейнеру.)

— Joonas

2

Предупреждение: этот вопрос гораздо менее широко применим, чем кажется на первый взгляд. Похоже, что многие положительные голоса могут быть вызваны тем, что те, кто проголосовал за, также пропустили, чтоidздесь не соответствует CSS. Как написано (20151201), этот вопрос сводится к следующему: «Селекторы CSS, которые не соответствуют никаким объектам DOM, не влияют на внешний вид». ; ^) (Не могу понять, лучше ли отредактировать вопрос, чтобы спросить, что подразумевает его заголовок, означает или нет ...)

— ruffin

135

Можно написать так:

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

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

— Sandeep
источник

Большое спасибо! Это отлично работает! Изменить: ну, не совсем - он также изменяет размеры изображений меньше 600 пикселей - а это то, чего я не хочу.

— user1315305

3

Я проголосовал против. OP хочет не то, что вы предлагаете. Вы также должны были понимать, что может быть проблема в коде OP, потому что обычно то, что он пробовал, должно работать ... Кто когда-либо голосовал, дайте мне причину, спасибо.

— Joonas

1

@Lollero first OP отредактирует свой вопрос после моего ответа, и вы можете объяснить, что не так в моем ответе? спасибо

— sandeep

2

Это не сохраняет соотношение сторон в IE

— Cocowalla

1

Какова цель «ширина: 100%»? Связанная скрипка без нее работает нормально? (Проверено в Firefox и Safari на Mac OX)

— Джон Шнайдер

13

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

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

— Мерле-жемчужина
источник

5

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

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

img.Image{
    display: inline-block;
}

— Камлеш Уикей
источник

3

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

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

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

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

#ImageContainer img {
    width: 600px;
}

— Лео Арментано
источник

Кроме того, комментарии к OP указывают, что вы используете неправильный идентификатор в файле CSS: div # ImageContainer не то же самое, что <div id = "ImageContainerr">

— Лео Арментано

1

Попробуй это

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

— Криш
источник

1

Это не так. Ваш селектор означает «элемент img внутри элемента изображения».

— Mr Lister

0

Ваш 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>

Развернуть фрагмент

— Ритм Рупарелия
источник