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

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

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

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

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

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

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

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

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

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

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

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

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

Не требуется 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

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

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

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

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

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

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

Удачи!