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

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

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

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

85 голосов | спросил rwallace 28 PM00000070000004531 2009, 19:18:45

7 ответов


0

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

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

ответил RiddlerDev 28 PM00000070000003731 2009, 19:21:37
0

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

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

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

ответил Jon W 28 PM00000070000002031 2009, 19:22:20
0

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: как исправить 25+ ошибок Internet Explorer 6

ответил unidentified-1 7 MarpmThu, 07 Mar 2013 22:25:02 +04002013-03-07T22:25:02+04:0010 2013, 22:25:02
0

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

ответил Ralph David Abernathy 17 J000000Friday15 2015, 18:37:50
0

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

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
ответил Selvadurai Handeeban 22 J000000Friday16 2016, 15:49:21
0

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

ответил riotera 28 PM00000070000005531 2009, 19:23:55
0

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

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

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

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

Удачи!

ответил Dorjan 28 PM00000070000002031 2009, 19:24:20

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132