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

Question

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

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

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

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

491 7

html image-scaling

7 ответов:

Comments

Ничего не найдено.

RiddlerDev · Accepted Answer · 2015-10-02 01:22:21

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

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

Jon W · Accepted Answer · 2013-05-24 09:19:10

глянув на ссылка на школы W3 для тега img, вы должны быть в состоянии сделать что-то вроде:
<img src="img.jpg" width="50%" height="50%"/>
для автоматического масштабирования с помощью Javascript,проверить этот совет

Selvadurai Handeeban · Accepted Answer · 2016-07-22 15:49:21

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

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

unidentified-1 · Accepted Answer · 2013-03-07 20:25:02

не требуется 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; }
реквизит перейти к источнику: окончательный IE6 Cheatsheet: как исправить 25 + Internet Explorer 6 ошибок

Ralph David Abernathy · Accepted Answer · 2016-05-23 09:23:42

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

riotera · Accepted Answer · 2015-02-21 03:49:53

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

Dorjan · Accepted Answer · 2009-08-28 18:24:20

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

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

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

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

удачи!