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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 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; }

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

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

Удачи вам!