Bootstrap - CSS класи для зображень, ІТ Шеф
Стаття, в якій ознайомимося з класами фреймворку Bootstrap 3 та 4 для оформлення зображень.
Що таке адаптивне зображення?
Адаптивне зображення - це зображення, яке підлаштовується під ширину елемента, де воно розташоване.
Тобто. воно відповідає наступним умовам:
- якщо ширина зображення менша за ширину елемента, в якому воно розташоване, то розміри цього зображення не змінюються.
- якщо ширина зображення більша за ширину елемента, в якому воно розташоване, то ширина зображення прирівнюється до доступної ширини батьківського елемента. При цьому висота зображення зменшується пропорційно щодо його ширини.
Як зробити зображення адаптивним
Надання зображення адаптивності здійснюється:
- в Bootstrap 3 за допомогою додавання до тегу img класу .img-responsive;
- в Bootstrap 4 шляхом додавання до тегу img класу .img-fluid .
Ці класи застосовує до зображення CSS властивості max-width:100% і height:auto.
Якщо необхідно зробити адаптивними відразу всі зображення, розташовані на сторінці або в деякому блоці, то для цього необхідно скористатися одним із нижченаведених правил CSS:
Це правило необхідно додати до CSS файлу, який повинен бути підключений після файлу bootstrap.css .
Як змінити форму зображення
У Bootstrap 3 і 4 можна за допомогою відповідних класів зробити зображення з закругленими кутами (Bootstrap 3 - img-rounded, Bootstrap 4 - rounded), укласти його в рамку (img-thumbnail) або надати йому форму кола (Bootstrap 3 - img-ci , Bootstrap 4 - rounded-circle).
Як змінити розташування зображення
Змінити розташування зображення в Bootstrap 3 можна за допомогою допоміжних класів float ( .pull-left і .pull-right ), класу .center-block і класів для вирівнювання тексту ( .text-left , .text-center і .text-right ) .
У Bootstrap 4 для вирівнювання елементів використовуються такі класи: float-left , float-right , mx-auto і класи для вирівнювання тексту ( .text-left , .text-center і .text-right ).
Наприклад, для того, щоб розмістити зображення по лівому краю до нього необхідно додати клас .pull-left :
Наприклад, для того, щоб розташувати зображення по правому краю до нього необхідно додати клас .pull-right :
Наприклад, щоб вирівняти зображення по центру до нього необхідно додати клас .center-block або помістити його в контейнер div з класом .text-center :
Приклади оформлення зображень
Розглянемо кілька варіантів оформлення зображень на веб-сайті.
Варіант 1. Оформлення зображення за допомогою рамки, що є вікном браузера в Mac OS (з трьома елементами управління зліва).
Варіант 2. Рамка для зображення, що має вигляд вікна браузера в Windows (з трьома елементами управління праворуч).
Варіант 3. Зображення з рамкою і написом «скриншот», що пояснює.
Варіант 4. Зображення із білою рамкою та тінню.
Коментарі ( 48 )
Щось нібито такого:
Сенс цієї технології (Client Hints) полягає в тому, щоб надіслати серверу у складі запитів для отримання зображень додаткову інформацію (DPR,Width,Viewport- Width- тобто щільність пікселів екрану, його ширину та ширину viewport). ДодаєтьсяClient Hintsв браузер легко за допомогою вставки в розділ head наступного тега: Після цього браузер взаголовна інформаціязапиту для кожної картинки буде включати ці дані. Але цю дію поки що робить тільки браузер Chrome.
Саме складне - це сервер.Отримавши такий запит на сервері, ви повинні його якось обробити. Інакше уClient Hintsне буде сенсу. Тобто. необхідно написати серверний скрипт, який, наприклад, шукатиме відповідну картинку за цими параметрами, і віддавати її клієнту (браузеру). Якщо картинки з потрібними параметрами немає, то, наприклад, її генерувати з вихідного файла.
Тобто. якось так. Жертвуя одним (процесорним часом і дисковим простором) - ви отримуєте натомість щось інше, в даному випадку більш швидке завантаження зображень (бо вони будуть віддаватися сервером у більш оптимальному дозволі).
Але можна отримати і зворотний ефект (довшу віддачу сторінок), наприклад, якщо ви використовуєте віртуальний хостинг і процесор «слабкий» (або сильно навантажений).
80% висоти має займати зображення. Воно свідомо завантажено більшого розміру і тому відображається на повне зростання. Щоб побачити нижню частину, доводиться прокручувати. А в ширину воно взагалі не обмежене - в широку можна розтягуватися скільки завгодно (не дістане до країв).