1

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

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 не работает, что не так?

1 ответ 1

4

Как указано в документации 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>

9
  • Благодарю за ответ, однако, убрав picture ничего не поменялось. Насчет второго способа - пробую, но почему-то подгружает только в самом большом разрешении, надо поэксперементировать
    – BERTOLDO
    23 сен 2021 в 13:41
  • @BERTOLDO обновил, посмотрите после строки UPD сниппет, запустите и посмотрите при разных разрешениях. Такое ли вы поведение ожидали?
    – Greg--
    24 сен 2021 в 7:43
  • Добавьте больше кода, скорее всего не хватает информации о родительском элементе для .movie чтоб понять почему в вашем случае так происходит, как видите по вашему коду в сниппете все работает именно так как вы хотели (cover работает верно), попробуйте воспроизвести ошибку в сниппете
    – Greg--
    24 сен 2021 в 7:49
  • Спасибо за ответ, ошибка заключалась в том, что тег picture был не на весь родительский контейнер, поэтому и изображение "съезжало", поставив picture на weight: 100% и height: 100% все стало работать как надо.
    – BERTOLDO
    25 сен 2021 в 11:16
  • @bertoldo ошибка не в этом была, тегу picture не нужно указывать никаких свойств, это контейнер, это тоже самое что указать тегу head display:block и отобразить на странице
    – Greg--
    27 сен 2021 в 6:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.