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

114

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

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

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

html image-scaling

— 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) Живя с ним и устанавливая ширину и высоту, это хотя и будет выглядеть искаженным, но правильный размер все равно приведет к тому, что пользователю придется загружать полноразмерное изображение.

Удачи!

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