Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Bootstrap img responsive или адаптируем картинки под любые существующие разрешения экрана

Приветствую всех читателей текущей публикации. Данную статью я писал специально для того, чтобы раскрыть все тайны Bootstrap img responsive. Это очень простая и небольшая тема, знания в которой могут вам и сильно выручат во время создания дизайна сайтов под разные размеры современных девайсов.

Я расскажу вам о некоторых встроенных возможностях фреймворка Bootstrap для работы с изображениями, объясню, как с его помощью можно создать адаптивные графические файлы, каким образом изменять их форму и расположения, а также приведу конкретные примеры кода. Вперед за дело!

Так что там, говорите, у вас есть для моего случая?

В изучаемом вами фреймворке есть раздел для работы с изображениями. Это Bootstrap Images. В него входят встроенные классы, которые позволяют изменять форму картинок, создавать миниатюры и отзывчивые графические файлы. При чем не только фотографий и рисунков, а еще и других документов мультимедиа. Разберем подробнее каждый из них.

Скажем «НЕТ» острым углам

Для того чтобы округлить углы изображений, в Bootstrap 3 есть специальный класс под названием .img-rounded. Однако стоит учитывать тот факт, что он не функционирует во всеми любимом Internet Explorer 8. Поэтому там придется обратиться к привычным инструментам.

Выглядит код реализации следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Работа с изображениями</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
   p {
   text-align:center;
}
  </style>
</head>
<body>
<!--Для запуска последующих примеров изменяйте строки кода, написанные ниже-->
<p></p>
</body>
</html>

Хочу круглые картинки!

Если закругленные углы вам не подходят, то с помощью класса .img-circle вы можете изменить прямоугольную форму изображений на эллипсоидную. Для этого измените название класса в теге img на class="img-circle":

<p><img src="https://img0.ndsstatic.com/wallpapers/d45b9413999b7c622441c23ed7d74166_large.jpeg" class="img-circle" alt="Cinque Terre" width="330" height="240"></p>

Опять-таки данный инструмент не работает в Internet Explorer 8.

А как же миниатюрки?

Спокойно. Даже их предусмотрели создатели фреймворка и разработали класс .img-thumbnail. Однако на выходе вы не получите уменьшенное изображение без дополнительных махинаций с кодом. В результате обработанная картинка будет обрамлена в стилизованную рамку, а размер вам придется задавать самостоятельно, как и в предыдущих примерах:

<p><img src="https://img0.ndsstatic.com/wallpapers/d45b9413999b7c622441c23ed7d74166_large.jpeg" class="img-thumbnail" alt="Cinque Terre" width="330" height="240"></p>

Что может быть круче отзывчивых картинок!

В зависимости от размера экрана на различных устройствах разработчику приходилось прописывать медиазапросы для создания отзывчивого дизайна сайта. Это касалось и графических файлов (хотя существует и более простой способ создания адаптивных изображений).

Опять-таки Bootstrap нашел быстрое решение и здесь. В фреймворке существует специальный класс .img-responsive. С его помощью выбранные изображения превращаются в отзывчивые и поэтому автоматически приспосабливаются под размеры дисплеев.

В описываемом классе используется всего лишь 3 стандартных стилевых правила, которые обычно и применяются для решения поставленной цели:

display: block;

max-width: 100%;

height: auto;

Как видите ничего нового. Вставьте в программный код примера строки:

    <p><img src="https://img0.ndsstatic.com/wallpapers/d45b9413999b7c622441c23ed7d74166_large.jpeg" class="img-responsive" alt="Cinque Terre" width="640" height="380"></p>

А круче может быть только отзывчивые медиафайлы!

Как я уже говорил, автоматически адаптирующимися под размер экрана можно сделать не только графические файлы, а еще объекты, подходящие под перечисленные теги: <video>, <object>, <embed> и <iframe>.

Например, в программе ниже я реализовал отзывчивое оформление видеофайла.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Отзывчивое видео</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2> Отзывчивое видео</h2>
<!--Для универсальных HD и цифровых телевизоров используется 16:9, а для видеоформатов 20-го столетия – 4:3-->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/p8eXQDf0qmc"></iframe>
  </div>
</div>
</body>
</html>

На этом текущая публикация подошла к концу. Не забывайте вступать в ряды подписчиков и рассказывать о моем блоге друзьям. Желаю удачи в обучении. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 2432 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: