Cover img css: object-fit — CSS | MDN — Вебджем.рф | Создание и продвижение сайтов

Содержание

object-fit — CSS | MDN

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

Для object-fit можно указать одно из нижеперечисленных свойств.

Значения

fill: Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain: Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как «помещённый внутрь» блока, ограничиваясь его шириной и высотой.
cover: Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как «покрытие» блока, ограничиваясь его шириной и высотой.
none: Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
scale-down: Контент изменяет размер, сравнивая разницу между none и contain, для того, чтобы найти наименьший конкретный размер объекта.

Правильный синтаксис

object-fit = 
fill        | (en-US)
contain     | (en-US)
cover       | (en-US)
none        | (en-US)
scale-down

HTML Контент

<div>
  <h3>object-fit: fill</h3>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <h3>object-fit: contain</h3>
  <img src="mdn_logo_only_color. png" alt="MDN Logo"/>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <h3>object-fit: cover</h3>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <h3>object-fit: none</h3>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <h3>object-fit: scale-down</h3>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
  <img src="mdn_logo_only_color.png" alt="MDN Logo"/>
</div>

CSS Контент

h3 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}
div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}
img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}
.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
. cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

Результат

Specification	Status	Comment
CSS Images Module Level 4 Определение ‘object-fit’ в этой спецификации.	Рабочий черновик	`Добавлены ключевые слова from-image` `и flip`
CSS Images Module Level 3 Определение ‘object-fit’ в этой спецификации.	Кандидат в рекомендации	Первоначальное определение

Начальное значение	`fill`
Применяется к	заменяемые элементы
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Другие свойства CSS, связанные с изображениями (картинками): object-position, image-orientation (en-US), image-rendering (en-US), image-resolution (en-US).
background-size

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

css — Сложности со свойством object-fit внутри flex

Вопрос задан 5 лет 2 месяца назад

Изменён 5 лет 2 месяца назад

Просмотрен 2k раз

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

flex для растягивания контейнера с картинкой до нужного размера, но свойство object-fit: cover у картинки при этом не работает. Для примера, без флекса — всё ок. (если подвигаете ширинур вьюпорта — сразу видно)

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background-color: beige;
}

.first-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: blue;
}

.first-show {
  background-color: #ccc;
  flex: auto;
}

.second-screen {
  height: 100vh;
}

.second-show {
  height: 100%;
}

img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

<div>
  <header>header
  </header>
  <div>
    <img src="http://bipbap.
  ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080.jpg" alt="First slide">
  </div>
</div>
<div>
  <div>
    <img src="http://bipbap.ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080.jpg" alt="First slide">
  </div>
</div>

Собственно вопросы: почему и как обойти?

css
flexbox
адаптивность

Пока увидел один способ решения: обернуть картинку в блок с position: absolute; top: 0; bottom: 0; Это больше похоже на хак, поэтому надеюсь на альтернативные способы.

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background-color: beige;
}

.first-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: blue;
}

.first-show {
  position: relative;
  background-color: #ccc;
  flex: auto;
}

.   img-container {
  position: absolute;
  top: 0;
  bottom: 0;
}

img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

<div>
  <header>header
  </header>
  <div>
    <div>
      <img src="http://bipbap.ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080.jpg" alt="First slide">
    </div>
  </div>
</div>

img динамически не растягивается на высоту элемента. Решения: если блок состоит только из картинки, то обертка div не нужна, а если в блоке будет контент — лучше картинку задавать через background(опять же поддержка ie11). Ниже приведу пример с сохранением img.

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background-color: beige;
  flex:0 0 auto;
}

.first-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: blue;
}

.
  first-show {
  background-color: #ccc;
  flex: 1 1 auto;
}

.second-show {
  height: 100vh;
}
img {
  width:100%;
  object-fit: cover;
  object-position: center;
}

<div>
  <header>header
  </header>
    <img src="http://bipbap.ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080.jpg" alt="First slide">
</div>
<div>
    <img src="http://bipbap.ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080.jpg" alt="First slide">
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

object-fit — CSS: каскадные таблицы стилей

Свойство CSS object-fit задает способ изменения размера содержимого заменяемого элемента, например или , на подходит к его контейнеру.

Вы можете изменить выравнивание объекта содержимого замененного элемента в поле элемента, используя свойство object-position .

 подходит для объекта: содержит;
объект подходит: обложка;
объект-подгонка: заполнить;
соответствие объекту: нет;
объект-подгонка: уменьшение масштаба;
/* Глобальные значения */
объект-подгонка: наследовать;
соответствие объекту: начальный;
объект-подгонка: вернуться;
объект-подгонка: обратный слой;
соответствие объекту: не установлено;

Свойство object-fit задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат: Заменяемое содержимое масштабируется, чтобы сохранить соотношение сторон и вписаться в поле содержимого элемента. Весь объект заполняет поле, сохраняя при этом его соотношение сторон, поэтому объект будет помещен в «почтовый ящик», если его соотношение сторон не соответствует соотношению сторон поля.
крышка: Размер замененного содержимого соответствует соотношению сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.
заполнение: Размер замененного содержимого соответствует размеру поля содержимого элемента. Весь объект полностью заполнит поле. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут до нужного размера.
нет: Размер замененного содержимого не изменяется.
в уменьшенном масштабе: Содержимое имеет размер, как если бы было указано нет или содержит , в зависимости от того, что приведет к меньшему размеру конкретного объекта.

Исходное значение заполнение

Относится к замененные элементы

Унаследован NO

Вычисленные значения Как указано

Тип анимации Дискрет

Дискрет

содержат |
крышка |
нет |
уменьшение масштаба

Установка соответствия объекта для изображения

HTML

 
   соответствие объекта: заливка 
  
  
   соответствует объекту: содержит 
  
  
   object-fit: обложка 
  
  
   соответствие объекту: нет 
  
  
   объектное соответствие: уменьшение

CSS

 h3 {
  семейство шрифтов: Courier New, моноширинный;
  размер шрифта: 1em;
  поле: 1эм 0 0,3эм;
}
картинка {
  ширина: 150 пикселей;
  высота: 100 пикселей;
  граница: 1px сплошная #000;
  поле: 10px 0;
}
. узкий {
  ширина: 100 пикселей;
  высота: 150 пикселей;
}
.наполнять {
  объект-подгонка: заполнить;
}
.содержать {
  подходит для объекта: содержит;
}
.крышка {
  объект подходит: обложка;
}
.никто {
  соответствие объекту: нет;
}
.уменьшать {
  объект-подгонка: уменьшение масштаба;
}

Результат

Спецификация
Модуль изображений CSS Уровень 3 # the-object-fit

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

Другие свойства CSS, связанные с изображением: object-position , image-orientation , image-rendering , image-resolution .
размер фона

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

html - Показать изображение с помощью `object-fit: cover`, но только если оно не помещается в контейнер

Я хочу показывать изображения на своем веб-сайте со следующей логикой: размер контейнера (высота 240 пикселей, ширина 100%), просто покажите его как есть

В противном случае покажите это, используя объект : обложка стиль

Таким образом, для огромных изображений они будут ограничены высотой 240 пикселей и полной шириной контейнера. Но маленькие изображения не будут увеличены, они будут отображаться в реальном размере. Изображение размером 50x50 пикселей будет отображаться как 50x50 пикселей.

Надеюсь, пока все понятно.

Итак, основная идея будет такой: