Почему object-fit не работает с ?

Question

У меня есть изображения, которые в зависимости от ширины экрана меняться на изображения более высокого разрешения.

html:

<div class="movie">
    <picture>
     <source srcset="src/img/posters/poster-4-big.jpg" media="(min-width: 2000px)">
     <img src="src/img/posters/poster4.png" alt="Инферно">
    </picture>
</div>

css:

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

Когда ширина окна до 2000px - изображения кладутся в контейнер как надо - картинка на всю ширину и высоту без искажений, однако, при ширине свыше 2000px картинка помещается только по ширине родительского блока, тем самым оставляя отступы снизу, я делаю вывод, что object-cover не работает, что не так?

Answer 1

Как указано в документации W3C, object-fit применим к replaced elements.

Такими элементами являются теги audio, canvas, embed, iframe, img, input, object, и video. список

Вам нужно стили задавать для img так как picture - это контейнер

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

Если у вас верно указаны размеры контейнера для .movie то все будет работать

Дополнено о теге picture:

Элемент picture не рендерит никакой контент, а лишь является справочным контейнером для вложенного в него тега img. Поэтому для большинства задач хватит сокращенной записи, совсем без использования picture:

<img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>

источник ХАБР

UPD

Благодарю за ответ, однако, убрав picture ничего не поменялось. Насчет второго способа - пробую, но почему-то подгружает только в самом большом разрешении, надо поэксперементировать

Посмотрите на пример при разных разрешениях: Убирать picture не нужно, этому тегу не нужно css задавать.

Работает ли у Вас нижеприведённый код? Я поменял на 1024px+ - одна картинка, 500- - другая картина - остальные - картинка по умолчанию

.movie {
  width: 600px;
  height: 400px;
}

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

<div class="movie">
  <picture>
    <source srcset="https://dummyimage.com/1024x768/00aad4/fff&text=1024+" media="(min-width: 1024px)"><source srcset="https://dummyimage.com/400x300/12d400/fff&text=mobile" media="(max-width: 500px)">
    <img src="https://dummyimage.com/600x400/000/fff&text=default" alt="Инферно">
  </picture>
</div>

БЛОГ НА HUSL

Почему object-fit не работает с ?

Ответы (1 шт):