Масштабирование HTML img

114

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

Или, если это, скорее всего, невозможно, можно ли хотя бы сказать «отобразить это изображение на 50% от его нормальной ширины и высоты»?

Атрибуты ширины и высоты искажают изображение - насколько я могу судить, это потому, что они относятся к любым атрибутам, которые может иметь контейнер, которые не будут иметь отношения к изображению. Я не могу указать пиксели, потому что мне приходится иметь дело с большой коллекцией изображений, каждое с разным размером пикселя. Максимальная ширина не работает.

rwallace
источник
4
Имейте в виду, что не рекомендуется отправлять огромные изображения и делать их маленькими с помощью css. Лучше иметь разные версии одного и того же изображения, чтобы сэкономить трафик и сделать страницу более отзывчивой (даже если изображение будет выглядеть маленьким, будет отправлено полное изображение).
Эстебан Кюбер,
1
rwallace, вы используете .net или PHP или что-то еще, кроме чистого HTML?
Доржан
1
Размер файла изображения не имеет значения, в случае, если я ищу, не нужно экономить на пропускной способности. Я использую PHP, но решение HTML работает.
rwallace

Ответы:

135

Установите только widthили height, и он автоматически масштабирует другой. И да, вы можете использовать процент.

Первая часть может быть выполнена, но требует JavaScript, поэтому может работать не для всех пользователей.

RiddlerDev
источник
7
Пожалуйста, обратите внимание, что выполнение этого действия с большими изображениями приведет к длительному времени загрузки для страниц, которые не должны иметь долгое время загрузки. Всегда лучше изменить размер изображения, если это возможно.
ceejayoz
Спасибо! Оказывается, ваше решение только установки ширины работает не только для правильного масштабирования, но фактически также выполняет первую часть, просто устанавливая ширину на 100%.
rwallace
2
@ceejayoz Я согласен, но он спрашивает не об этом.
RiddlerDev
@ceejayoz Мне интересно, почему это занимает больше времени? Разве ему не нужно изменять размер, когда он отображается для обеих ситуаций? Или вы говорите вручную изменить размер фактического изображения и изменить файл?
Абдул
2
@Abdul Я говорю, что изображение размером 3,000x3,000 пикселей и размером 5 МБ не следует использовать в слоте 100x100 пикселей на вашем веб-сайте.
ceejayoz
18

css достаточно:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Сельвадурай Хандибан
источник
9

Я знаю, что этот вопрос задают давно, но на сегодняшний день один простой ответ:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Использование здесь vw говорит о том, что ширина составляет 55% от ширины области просмотра.

В настоящее время это поддерживают все основные браузеры.

Проверьте эту ссылку .

Димитрий де Хесус
источник
1
vwбыл для меня палочкой-выручалочкой, другие методы не работали с изображением под рукой.
caram
6

Не требуется Javascript.

IE6 Internet Explorer 6

Процент работает только для ширины элемента, но height:100%;не работает без правильного кода.

CSS

html, body { height:100%; } 

Затем использование процента работает правильно и динамически обновляется при изменении размера окна.

<img src="image.jpg" style="height:80%;">

Атрибут ширины не требуется, ширина изменяется пропорционально изменению размера окна браузера.

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

img { -ms-interpolation-mode: bicubic; }

Реквизиты идут к этому источнику: Ultimate IE6 Cheatsheet: How to Fix 25+ Internet Explorer 6 Bugs

неопознанный-1
источник
6

Добавление max-width: 100%;в imgтег у меня работает.

Ральф Дэвид Абернати
источник
2

Я думаю, что лучшее решение - изменить размер изображений с помощью скрипта или локально и снова загрузить их. Помните, вы заставляете своих зрителей скачивать файлы большего размера, чем им нужно.

риотера
источник
0

Лучший способ, которым я знаю, как это сделать, - это:

1) установите переполнение для прокрутки, и таким образом изображение останется, но вы можете прокрутить, чтобы вместо этого увидеть его

2) загрузите изображение меньшего размера. Теперь есть много программ при загрузке (вам понадобится что-то вроде PHP или .net, чтобы сделать это, кстати), вы можете автоматически масштабировать его.

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

Удачи!

Доржан
источник