it-swarm.com.ru

Почему объектная подгонка не работает во flexbox?

У меня есть несколько столбцов, которые я даю равной ширине с помощью flex. Каждый из них содержит теги img, и я хотел бы, чтобы на этих изображениях отображался размер object-fit: cover.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}
<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Размеры изображений не меняются, как видно из этой демонстрации . Это почему?

15
Jack Guy

Из спецификации :

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

Ключевым термином является: вписывается в коробку, установленную по используемой высоте и ширине

Изображение заменяется, а не его контейнер. И поле, установленное по его используемой высоте и ширине, относится к самому изображению, а не к его контейнеру.

Итак, утилизируйте контейнер и сделайте изображения самими гибкими предметами.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Пересмотренный Codepen


Дополнительные детали

5.5. Определение размеров объектов: object-fit имущество

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

Вот три значения:

  • cover

    Размер заменяемого содержимого сохраняется для сохранения соотношения сторон, пока заполнение всего поля содержимого элемента.

  • contain

    Размер заменяемого содержимого сохраняется для сохранения соотношения сторон, пока вписывается в поле содержимого элемента.

  • fill

    Размер заменяемого содержимого заполнен в поле содержимого элемента.

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

С contain соотношение сторон также сохраняется, но изображение масштабируется, чтобы поместиться в рамку. Это может привести к появлению пробелов слева и/или справа (портретная посадка) или сверху и/или снизу (альбомная посадка). Свойство object-position можно использовать для смещения изображения внутри его поля.

При использовании fill соотношение сторон отменяется, а размер изображения соответствует размеру окна.


Совместимость браузера

На момент написания статьи object-fit не поддерживается Internet Explorer . Для обхода см .:

21
Michael_B

Проблема заключается в том, что object-fit определяет, как изображение рисуется внутри img, но вы не указали размеры этих элементов, только размеры их родителей .test.

Таким образом, альтернатива ответ Michael_B делает изображения того же размера, что и элементы flex:

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

12
Oriol

Для тех, кто не может просто «очистить контейнер и сделать сами изображения гибкими элементами», просто добавьте уровни контейнера:

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">
0
btown