Масштабування HTML-зображень

114

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

Або у ймовірному випадку, якщо це неможливо, чи можна принаймні сказати "відобразити це зображення на 50% від його нормальної ширини та висоти"?

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

html image-scaling

— rwallace
джерело

4

Майте на увазі, що не рекомендується надсилати величезні зображення та робити їх невеликими за допомогою css. Краще мати різні версії одного і того ж зображення, щоб зберегти пропускну здатність і зробити сторінку більш чутливою (навіть якщо зображення буде виглядати мало, повне зображення буде надіслане).

— Естебан Кюбер

1

rwallace, ти використовуєш .net чи PHP чи щось інше, ніж чистий HTML?

— Дорджан

1

Розмір файлу зображення не має значення, немає необхідності в тому випадку, якщо я дивлюся, щоб він був вигідним з пропускною здатністю. Я використовую PHP, але рішення HTML працює.

— rwallace

135

Встановіть лише widthабо height, і він автоматично змінить масштаб. І так, ви можете використовувати відсоток.

Перша частина може бути виконана, але вимагає JavaScript, тому може працювати не для всіх користувачів.

— RiddlerDev
джерело

7

Будь ласка, зауважте, що це робити на масивних зображеннях призведе до тривалого часу завантаження сторінок, які не повинні мати тривалий час завантаження. Завжди краще насправді змінити розмір зображення, якщо це можливо.

— ceejayoz

Дякую! Виявляється, ваше рішення лише встановити ширину не тільки працює для правильного масштабування, але й фактично робить першу частину лише встановивши ширину на 100%.

— rwallace

2

@ceejayoz Я згоден, але він не про це запитує.

— RiddlerDev

@ceejayoz Цікаво, чому це займає більше часу? Чи не потрібно змінювати розмір, коли відображається для обох ситуацій? Або ви говорите вручну змінити розмір фактичного зображення та змінити файл?

— Абдул

2

@Abdul Я кажу, що зображення розміром 5 000x3000 пікселів 5 МБ не слід використовувати у слоті розміром 100х100 пікселів на вашому веб-сайті.

— ceejayoz

18

css достатньо:

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

— Сельвадурай Хандебан
джерело

9

Я знаю, що це питання задавали давно, але на сьогоднішній день одна проста відповідь:

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

Використання vw тут говорить про те, що ширина відносно 55% від ширини вікна перегляду.

Усі основні браузери нині підтримують це.

Перевірте це посилання .

— Димитрій де Ісус
джерело

1

vwдля мене було рятувальником життя, інші методи не працювали на образ.

— карам

6

Не потрібно 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 Cheatsheet IE6: Як виправити 25+ помилок Internet Explorer 6

— невпізнаний-1
джерело

6

Додавання max-width: 100%;до imgтегу працює для мене.

— Ральф Девід Абернаті
джерело

2

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

— riotera
джерело

0

Найкращий спосіб я знати, як це зробити:

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

2) завантажте зображення меншого розміру. Зараз під час завантаження є безліч програм (вам потрібно щось на зразок PHP або .net, щоб зробити це btw), ви можете мати автоматичний масштаб.

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

Удачі!

— Дорджан
джерело