Наша взаимовыгодная связь https://banwar.org/
Стаття, в якій познайомимося з класами фреймворка Bootstrap 3 і 4 для оформлення зображень.
Адаптивне зображення - це зображення, яке підлаштовується під ширину елемента, в якому воно розташоване.
Тобто воно відповідає таким умовам:
- якщо ширина зображення менше ширини елемента, в якому воно розташоване, то розміри цього зображення не змінюються.
- якщо ширина зображення більше ширини елемента, в якому воно розташоване, то ширина зображення прирівнюється до доступної ширині батьківського елемента. При цьому висота даного зображення зменшується пропорційно щодо його ширини.
Як зробити зображення адаптивним
Додання зображенню адаптивності здійснюється:
- в Bootstrap 3 за допомогою додавання до тегу img класу .img-responsive;
- в Bootstrap 4 за допомогою додавання до тегу img класу .img-fluid.
Ці класи застосовує до зображення CSS властивості max-width: 100% і height: auto.
<! - Bootstrap 3 -> <img src = "..." class = "img-responsive"> <! - Bootstrap 4 -> <img src = "..." class = "img-fluid ">Якщо необхідно зробити адаптивними відразу все зображення, розташовані на сторінці або в деякому блоці, то для цього необхідно скористатися одним з ніжепредставленних правил CSS:
/ * 1 Спосіб - Надати адаптивність всіх зображень. При цьому дані зображення будуть себе ввести як рядково-блокові елементи (inline-block) * / img {display: inline-block; height: auto; max-width: 100%; } / * 2 Спосіб - Надати адаптивність всіх зображень. При цьому дані зображення будуть себе ввести як блокові елементи (block) * / img {display: block; height: auto; max-width: 100%; } / * 3 Спосіб - Надати адаптивність всіх зображень, розташованих в елементі з id = "main". При цьому дані зображення будуть себе ввести як блокові елементи (block) * / #main img {display: block; height: auto; max-width: 100%; }Дане правило необхідно додати в CSS файл, який повинен бути підключений після файлу bootstrap.css.
У Bootstrap 3 і 4 можна за допомогою відповідних класів зробити зображення з закругленими кутами (Bootstrap 3 - img-rounded, Bootstrap 4 - rounded), укласти його в рамку (img-thumbnail) або надати йому форму кола (Bootstrap 3 - img-circle , Bootstrap 4 - rounded-circle).
<! - Bootstrap 3 -> <img src = "..." alt = "..." class = "img-rounded"> <img src = "..." alt = "..." class = "img-circle"> <img src = "..." alt = "..." class = "img-thumbnail"> <! - Bootstrap 4 -> <img src = "..." alt = "..." class = "rounded"> <img src = "..." alt = "..." class = "rounded-circle"> <img src = "..." alt = ".. . "class =" img-thumbnail ">
Змінити розташування зображення в 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 можуть застосовуватися для вирівнювання зображень, які ведуть себе як блокові (block) або рядково-блокові (inline-block) елементи. Після їх застосування зображення стає блоковими.
Класи .text-left, .text-center і .text-right можуть бути використані тільки для зміни розташування зображень, які ведуть себе як рядково-блокові (inline-block) елементи.
Наприклад, для того щоб розташувати зображення по лівому краю до нього необхідно додати клас .pull-left:
<Img src = "..." class = "pull-left" alt = "...">Наприклад, для того щоб розташувати зображення по правому краю до нього необхідно додати клас .pull-right:
<Img src = "..." class = "pull-right" alt = "...">
Наприклад, для того щоб вирівняти зображення по центру до нього необхідно додати клас .center-block або помістити його в контейнер div з класом .text-center:
<! - 1 Спосіб. Додати до зображення клас .center-block -> <! - Застосовується для центрування зображень, які ведуть себе як блокові (block) або рядково-блокові (inline-block) елементи -> <! - Після застосування даного класу зображення стає блоковим (display: block) -> <img src = "..." class = "img-rounded center-block" alt = "...">
Bootstrap 4 - Зображення (демо)
Приклади оформлення зображень
Розглянемо кілька варіантів оформлення зображень на сайті.
Варіант 1. Оформлення зображення за допомогою рамки, що представляє собою вікно браузера в Mac OS (з трьома елементами управління зліва).
<! - Bootstrap 3 -> / * CSS * / .srcshot {position: relative; background: #fff; border: 2px solid # 9e9e9e; margin-top: 20px; margin-bottom: 20px; } .Srcshot-header {display: flex; align-items: center; height: 20px; background: # 9e9e9e; border-bottom: 2px solid # 9e9e9e; } .Srcshot-header :: after {content: "скріншот"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: auto; margin-right: 5px; } .Srcshot-header-btn {width: 10px; height: 10px; background: #fff; margin-left: 5px; border-radius: 5px; } .Srcshot-wrapper {margin: 5px; } @Media (min-width: 768px) {.srcshot-wrapper {margin: 15px; }} .Srcshot-wrapper-item {display: block; max-width: 100%; height: auto; margin: 0 auto; } <! - HTML -> <div class = "srcshot"> <div class = "srcshot-header"> <div class = "srcshot-header-btn"> </ div> <div class = "srcshot- header-btn "> </ div> <div class =" srcshot-header-btn "> </ div> </ div> <div class =" srcshot-wrapper "> <img src =" image-1.png " alt = "" class = "srcshot-wrapper-item"> </ div> </ div> Варіант 2. Рамка для зображення, що має вигляд вікна браузера в ОС Windows (з трьома елементами управління праворуч).
<! - Bootstrap 3 -> / * CSS * / .srcshot {position: relative; background: #fff; border: 2px solid # 9e9e9e; margin-top: 20px; margin-bottom: 20px; } .Srcshot-header {display: flex; align-items: center; height: 20px; background: # 9e9e9e; border-bottom: 2px solid # 9e9e9e; } .Srcshot-header :: before {content: "скріншот"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: 5px; margin-right: auto; } .Srcshot-header-btn {width: 18px; height: 10px; background: #fff; margin-right: 5px; } .Srcshot-wrapper {margin: 5px; } @Media (min-width: 768px) {.srcshot-wrapper {margin: 15px; }} .Srcshot-wrapper-item {display: block; max-width: 100%; height: auto; margin: 0 auto; } <! - HTML -> <div class = "srcshot"> <div class = "srcshot-header"> <div class = "srcshot-header-btn"> </ div> <div class = "srcshot- header-btn "> </ div> <div class =" srcshot-header-btn "> </ div> </ div> <div class =" srcshot-wrapper "> <img src =" image-1.png " alt = "" class = "srcshot-wrapper-item"> </ div> </ div>Варіант 3. Зображення з рамкою і яка б пояснила написом «скріншот».
<! - Bootstrap 3 -> / * CSS * / .srcshot {position: relative; text-align: center; margin-top: 20px; margin-bottom: 20px; } .Srcshot :: before {content: "скріншот"; position: absolute; top: 0; left: 50%; transform: translateX (-50%); padding: 6px 6px 4px; color: # 616161; background: #fff; font-size: 12px; } .Srcshot-dark :: before {color: #fff; background: # 616161; } .Srcshot-item {display: inline-block; border: 5px solid #fff; box-shadow: 0 0 10px # 9e9e9e; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; max-width: 100%; height: auto; } .Srcshot-item-dark {border: 5px solid # 616161; } <! - HTML -> <div class = "srcshot"> <img src = "image.png" alt = "" class = "srcshot-item"> </ div> Варіант 4. Зображення з білою рамкою і тінню.
<! - Bootstrap 3 -> / * CSS * / .img {display: block; margin-top: 20px; margin-bottom: 20px; text-align: center; } .Img-item {display: inline-block; border: 5px solid #fff; box-shadow: 0 0 10px # 9e9e9e; max-width: 100%; height: auto; } <! - HTML -> <div class = "img"> <img src = "image.png" alt = "" class = "img-item"> </ div>
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
