Веб-Мастеру

Bootstrap — CSS классы для изображений

Статья, в которой познакомимся с классами фреймворка 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).

<!-- 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>

Источник: itchief.ru

Похожие записи

Загрузка ....