Неполадка объекта, не влияющая на изображения

Ответ 1

Объект-Fit

CSS-свойство "подгонка объекта" определяет, как следует изменять размер содержимого заменяемого элемента, такого как <img> или <video>, чтобы соответствовать его контейнеру.

Замененный элемент

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

Это означает, что подгонка объекта не зависит от ваших элементов article, поскольку подгонка объекта касается только размеров элемента img.

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

Образец кода/демонстрация

$(function() { $("img").resizable(); });

img {
  width: 300px;
  height: 300px;
  border: 1px solid #FF0000;
  background-color: #00FF00;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scaledown {
  object-fit: scale-down;
}

.variant1 {
  max-width: 100px;
}

.variant2 {
  max-height: 100px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Resize images to see properties with different dimensions.</p>

<h1>fill (default)</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="fill" />

<h1>contain</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="contain" />

<h1>cover</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="cover" />

<h1>none</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="none" />

<h1>scale-down</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="scaledown" />
<!-- Spacer for scale down scroll annoyance -->
<br /><br /><br /><br /><br /><br /><br />

Ответ 2

Для object-fit само изображение требует width и height. В OP CSS изображения не имеют ширины и/или высоты, поэтому подгонка объектов не может работать.

Подсказка: width и height НЕ должны быть размерами самого изображения! Думайте об этом как о div: если вы хотите, чтобы div заполнял свой контейнер, вы установите

width:100%; height:100%;

... и браузер будет знать, что этот div должен полностью заполнить пространство контейнера.

В случае img браузер выполняет два шага:

1. Браузер создает ограничивающий прямоугольник: по умолчанию размеры прямоугольника будут точными размерами самого изображения. Но мы можем сказать браузеру, что размер изображения должен составлять 100% ширины контейнера и 100% высоты контейнера. Тогда это создаст коробку, которая полностью заполняет пространство контейнера.
2. Браузер помещает пиксели изображения в это поле: по умолчанию изображение будет сжато/растянуто, чтобы ширина изображения соответствовала ширине блока, а высота изображения соответствовала высоте блока. Но с помощью object-fit вы можете выбрать, как сопоставить размеры изображения и рамки. Например, используя команды object-fit:cover чтобы увеличить/уменьшить изображение, чтобы полностью заполнить поле, сохраняя при этом его соотношение сторон.

Что касается ОП, я бы просто установил:

main > section.posts > article > img {
  width: 100%; /* image box size as % of container, see step 1 */
  height: 100%; /* image box size as % of container, see step 1 */
  object-fit: cover; /* matching of image pixels to image box, see step 2 */
}

Последнее предостережение: при использовании% значений для определения размера контейнер должен иметь определенную ширину и высоту, чтобы объект подходил для работы. OP должен был бы определить height в main > section.posts > article.

Ответ 3

Вот что сказано в спецификации:

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

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

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

Поэтому я добавил атрибуты height и width к вашим элементам img, и теперь это работает.

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

Для того, чтобы удалить крошечные линии пробельного под каждое изображение, добавить vertical-align: bottom к img. Для объяснения смотрите здесь: Загадочное пустое пространство под тегом изображения

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

1. object-fit (без поддержки IE; ограниченная поддержка Safari)
2. main (без поддержки IE)
3. flexbox (рассмотрим префиксы)

Ответ 4

Я изменил контейнер, изображение и родительский контейнер контейнера на box-sizing: content-box, так как img заменен и переключил object-fit: cover на контейнер вместо img. Поскольку ожидается, что img будет обрезано, высота 100vh и ширина 100% и смещение на 22hw хорошо отразились на первой четверке, похоже, немного искажены как нижние два img, не так много. object-position все еще не работает для меня (никогда): -\

http://codepen.io/01/pen/zrvdaz?editors=110

body{
    margin: 0 auto; padding: 0;
}
main{
    min-height: 70vh;
    padding: 0;
}
main > section.posts{
    box-sizing: content-box;
    margin: 0; padding: 0;
    display: flex;
    flex-flow: row wrap;
}
main > section.posts > article{
  outline: 1px solid red;
    width: 22vw;
    min-height: 100vh;
    margin: 0; padding: 0;
    flex-grow: 1;
    overflow: hidden;
    box-sizing:content-box;
  object-fit: cover;

}
main > section.posts > article > img{
 display: block;
  box-sizing:content-box;
  max-height: 100vh;
  width: calc(100% + 22vh);
  object-position: 100% 100%;
}