Bootstrap изображение

цель

В этом уроке мы обсудим три класса Bootstrap 3, чтобы добавить стиль к изображениям. Мы также обсудим о содержании отзывчивым изображения Bootstrap 3 при условии.

Общий стиль

Прежде чем мы обсудим определение особого стиля класса изображения Bootstrap 3 предложения, мы увидим изображения определения общего стиля бутстрапе 3 предложение.

IMG {
  границы: 0;
}

Это первые изображения определены правила CSS, найденные в Bootstrap CSS 3, при визуализации изображения, используемого для удаления границы.

Затем, в запросах печатных СМИ, положения этих правил.

 IMG {
	страницы обкатки внутри: избежать;
  }
  IMG {
	! Максимальная ширина: 100% важно;
  }

страницы взлома внутри: избежать; избегать разрывов страниц внутри изображения.

! Макс-ширина: 100% важно , изображение определенный стиль очевидно. Даже там, где он используется для определения ширины изображения вне контейнера, оно также может быть ограничена на дисплее контейнера. Это Важно! Используется в сочетании с другими стилями , чтобы покрыть любой ущерб этому стилю. Иногда разработчики хотят стиль лучшую поддержку для мобильных устройств дружественным рендеринга изображений, будут использовать эти две специальные правила.

Существует также еще одно правило для изображения

IMG {
  вертикально-Align: средний;
}

Из-за этого правила, изображение будет по центру вертикально в DIV или других элементов. Как показано в следующих примерах.

Обратите внимание, что если вам нужно в центр изображения по вертикали в зависимости от контекста, необходимости дополнительных стилей.

Специальный стиль

Bootstrap 3 обеспечивает три класса изображения с четким стилем для рендеринга.

IMG округлены

Вы можете использовать этот класс, чтобы сделать изображение с закругленными углами. Для достижения этой цели, Bootstrap предоставляет IMG округлены класс. Класс стиля определяется следующим образом

.img-округлый {
  граница радиуса: 6px;
}

Таким образом, это границы радиуса свойство до 6 с помощью значений пикселов , используемых для определения соответствующего скругления изображения. Следующий пример демонстрирует два одинаковых изображения, первое изображение без IMG округленный класс, второе изображение с IMG-округлая класса. Обратите внимание, что второе изображение округляется. Вы можете нажать здесь , чтобы посмотреть онлайн - примеры .

IMG-миниатюрами

Это еще один Bootstrap CSS класс 3, которые добавляют к изображению эскиза. Код класса показан ниже

.img-миниатюрами {
  Дисплей: встроенный блок;
  высота: авто;
  макс-ширина: 100%;
  обивка: 4px;
  высота линии: 1,428571429;
  фонового цвета: #ffffff;
  границы: 1px твердый #dddddd;
  граница радиуса: 4px;
  -webkit-переход: все 0.2s легкость и выкатывания;
		  Переход: все 0.2s легкость и выкатывания;
}

Вот пример этого класса. Вы можете нажать здесь , чтобы посмотреть онлайн демо .

IMG-круг

Используя свойства границы радиуса, Bootstrap 3 создает круговое изображение представлено. IMG-круг код класса CSS следующим образом

.img-круг {
  граница радиуса: 50%;
}

Нажмите здесь , чтобы посмотреть онлайн - примеры . Ниже приведены скриншоты и код.

Отзывчивый изображение

Bootstrap 3 не обеспечивает готовых реагирующие изображений. Вы должны добавить IMG-отзывчивым класс , чтобы сделать его отзывчивым к изображению. Класс кода CSS ниже.

.img-отзывчивым {
  Дисплей: блок;
  высота: авто;
  макс-ширина: 100%;
}

Он определяет изображения должны быть отображены в качестве элемента уровня блока, высота той же высоте изображения, максимальная ширина изображения составляет 100%, в соответствии с изображением, чтобы ограничить устройства, к которому он представлен.

Для того, чтобы сделать изображение , имеющее ответ по умолчанию, вы можете добавить код в CSS IMG {}.

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

Это добавляется к ответу изображения методы имеют свои ограничения.

Соответственно, в большом экране и мобильных устройств (меньший размер экрана может привести к снижению производительности) загружены одинаково большие изображения с высоким разрешением. Поскольку браузер будет загружен до CSS и JS с предварительно загруженными изображениями в сети низкоскоростных соединений, он также может привести к снижению производительности. Представьте , что у вас есть большое изображение и конкретный объект внутри него, при просмотре изображений на экране мобильного устройства, то изображение будет уменьшено до уменьшенной версии изображения будут выглядеть настолько малы, проблема называется направления искусства ,

Разработчики придумали решения для преодоления этих ограничений. Мы увидим Марк Grabanski и Кристофера Шмитта Пример HiSRC из. Это изображение автоматически создает низкий, средний, с высоким разрешением версия Jquery пробки, в зависимости от версии, представленной разрешением отображения изображения и полосы пропускания устройства.

Позади нас ответная учебник изображение, мы обсудим все эти методы подробно.

Нажмите здесь , чтобы просмотреть интерактивную демонстрацию . Код выглядит следующим образом: