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

Question 1

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

Question 2

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

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

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

Question 3

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

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

Question 4

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

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

img.Image{
    display: inline-block;
}

Question 5

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

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

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

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

#ImageContainer img {
    width: 600px;
}

Question 6

Попробуй это

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

Question 7

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

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

Answer 1

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).

html css image image-resizing 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

Answer 2

1

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

Ray Cheng

Answer 3

2

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

Mr Lister

Answer 4

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

user1315305

Answer 5

3

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

Joonas

Answer 6

2

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

ruffin

Answer 7

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)

Джон Шнайдер

Answer 8

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

user1315305

Answer 9

3

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

Joonas

Answer 10

1

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

sandeep

Answer 11

2

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

Cocowalla

Answer 12

1

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

Джон Шнайдер

Answer 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">

Answer 14

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

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

img.Image{
    display: inline-block;
}

Answer 15

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

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

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

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

#ImageContainer img {
    width: 600px;
}

Answer 16

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

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

Answer 17

1

Попробуй это

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

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

1

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

Mr Lister

Answer 18

1

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

Mr Lister

Answer 19

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

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

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

Ответы: