Як зробити зображення адаптивним, масштабується, щоб розтягувалося (під будь-який пристрій) - топ
Сьогодні ви дізнаєтеся як можна дуже просто зробити будь-яке зображення адаптивним і масштабується, тобто щоб воно розтягувалося на весь екран. Наприклад якщо ви робите для свого сайту фото обкладинку або фонове зображення, то ви повинні враховувати, що сайт буде відкриватися на різних пристроях, різних розмірів. Зображення повинно підлаштовуватися під будь-який розмір екрану.
Заходимо на сайт, обкладинка відображається. Якщо у вас адаптивний шаблон, то обкладинка буде адаптуватися під менші екрани, а ось під екрани які більше ширини зображення, обкладинка НЕ буде підлаштовуватися.
Адаптивне зображення на будь-якому екрані
Щоб зробити зображення адаптивним і масштабується, щоб воно адаптувалося під будь-який розмір екрану, потрібно внести в код одне просте зміна. У коді зображення обкладинки, прибираємо позначення висоти (height), а для ширини вказуємо значення - «100%» (дивись скріншот). Зберігаємо код.
Знову заходимо в сервіс «quirKtools». вибираємо найбільший розмір екрану і дивимося що тепер обкладинка сайту адаптується під найбільший розмір екрану.
Ширина зображення буде відображатися на будь-якому пристрої на 100%, тобто на весь екран, а висота зображення буде обчислюватися автоматично пропорційно ширині зображення. Якби ви вказали конкретний розмір висоти зображення, то зображення відображалося б спотвореним, тобто не пропорційним.
Ось як виглядає розмір будь-якого адаптивного зображення:
Все просто ! Головне розібратися.
Ощадбанк онлайн
Найкращі !
Інтернет для просунутих
iPhone 7 Plus RED Special Edition
Створити сайт безкоштовно!
природне просування
оптимізація сайту
прискорення сайту
захист сайту
Просування в соцмережах
Супер плагіни Wordpress
WooCommerce від А до Я!
Записи по Windows 10
Комп'ютер для чайників