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

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

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

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

Ответ 1

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

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

Ответ 2

Взглянув на ссылку на W3 Schools для тега img, вы должны сделать что-то вроде:

<img src="img.jpg" width="50%" height="50%"/>

Для автоматического масштабирования через Javascript проверьте этот совет

Ответ 3

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

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

Ответ 4

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

IE6 Internet Explorer 6

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

CSS

html, body { height:100%; }

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

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

Вам не нужен атрибут width, ширина пропорционально изменяется при изменении размера окна браузера.

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

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

Реквизиты идут к этому источнику: Ultimate IE6 Cheatsheet: как исправить 25+ ошибки Internet Explorer 6

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

Удачи!