Как использовать тег изображения html5 и Bootstrap вместе

Я давно хотел иметь больший контроль над моими изображениями в разных окнах просмотра. Я не знал о теге <picture> в html5.

Я работаю с Bootstrap 3. Но имеет ли смысл использовать эти теги Bootstrap и <picture> вместе? Я не вижу, что он что-то делает в созданном мной тестовом коде.

<!DOCTYPE html>
<html lang = "en">
<head>
  <title>TEMPLATE</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <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/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
</style>
<body>
<div class = "container-fluid">
  <!-- Test row 1 -->
  <div class = "row">
    <div class = "col-sm-12">
      <picture>
        <source media = "(min-width: 991px)" srcset = "http://vouzalis.dk/1024.jpg">
        <source media = "(min-width: 768px)" srcset = "http://vouzalis.dk/991.jpg">
        <source media = "(min-width: 650px)" srcset = "http://vouzalis.dk/768.jpg">
        <source media = "(min-width: 380px)" srcset = "http://vouzalis.dk/380.jpg">
        <img src = "http://vouzalis.dk/1024.jpg" alt = "Test picture" style = "width:auto;">
      </picture>    
    </div>
  </div>
  <!-- Test row 2 -->
  <div class = "row">
    <div class = "col-sm-6">
      <picture>
        <source media = "(min-width: 991px)" srcset = "http://vouzalis.dk/1024.jpg">
        <source media = "(min-width: 768px)" srcset = "http://vouzalis.dk/991.jpg">
        <source media = "(min-width: 650px)" srcset = "http://vouzalis.dk/768.jpg">
        <source media = "(min-width: 380px)" srcset = "http://vouzalis.dk/380.jpg">
        <img src = "http://vouzalis.dk/1024.jpg" alt = "Test picture" style = "width:auto;">
      </picture>    
    </div>
    <div class = "col-sm-6">
      <picture>
        <source media = "(min-width: 991px)" srcset = "http://vouzalis.dk/1024.jpg">
        <source media = "(min-width: 768px)" srcset = "http://vouzalis.dk/991.jpg">
        <source media = "(min-width: 650px)" srcset = "http://vouzalis.dk/768.jpg">
        <source media = "(min-width: 380px)" srcset = "http://vouzalis.dk/380.jpg">
        <img src = "http://vouzalis.dk/1024.jpg" alt = "Test picture" style = "width:auto;">
      </picture>    
    </div>
  </div>
</div>
</body>
</html>

html css twitter-bootstrap

31.07.2018 21:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

But does it make sense to use those Bootstrap and tag

ИМХО, это, вероятно, зависит от того, используете ли вы CMS, которая альтернативно могла бы динамически создавать масштабированные изображения / превью, а также от того, сколько изображений вы собираетесь загружать на страницу.

Если это всего лишь несколько изображений, и вы кодируете статический html, я бы просто загрузил одно изображение и использовал класс Bootstrap fluid-img для управления выводом изображения. В противном случае я не вижу проблем с использованием, как вы.

31.07.2018 22:05

Другие вопросы по теме

Угловая форма css

Как сделать тег ввода в теге fieldset обязательным?

Конфликт CSS БЭМ с контейнером-оболочкой

Как лучше всего сделать так, чтобы окно поиска с автоматическим предложением появлялось поверх других элементов?

Могу ли я легко отлаживать код CSS для новичков?

Автоматическая прокрутка эскизов для галереи img

Как изменить изображение значка ссылки

Должны ли плагины postcss ссылаться на postcss как на одноранговую зависимость?

Символы эмодзи Unicode используют другое изображение / шрифт в зависимости от браузера

Флажок JavaScript не меняет таблицу стилей

Как использовать тег изображения html5 и Bootstrap вместе

Ответы 1

Другие вопросы по теме

Похожие вопросы