| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Розтягнути зображення на всю ширину вікна браузера.
Рішення
Масштабування зображень щодо їх початкового розміру не дуже хороша ідея, хоча б тому, що якість картинки дуже сильно погіршується. Тим не менш, для деяких видів зображень, наприклад, містять геометричні фігури або абстракцію, масштабування можна застосовувати цілком ефективно.
Для зміни ширини досить задати значення атрибуту width тега <img> як 100%. При цьому висота зображення буде обчислюватися автоматично виходячи із збереження пропорцій, тому атрибут height зазначати не потрібно (приклад 1).
Приклад 1. Ширина зображення
HTML5IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset="utf-8"/> <title>Ширина 100%</title> </head> <body> <p><img src="images/figure.jpg" alt="Вінні-Пух" width="100%"></p> </body> </html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Зображення з шириною 100%
Якщо для тега <img> все-таки встановити значення атрибута height у пікселях або відсотках, то висота зображення буде задана примусово, відповідно, буде перекручено його пропорції.