Приветствую всех читателей текущей публикации. Данную статью я писал специально для того, чтобы раскрыть все тайны 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> |
На этом текущая публикация подошла к концу. Не забывайте вступать в ряды подписчиков и рассказывать о моем блоге друзьям. Желаю удачи в обучении. Пока-пока!
С уважением, Роман Чуешов