Почему не срабатывает тег picture?

Question

[Вадим Ягофаров]

Почему не срабатывает тег picture? Раньше данным тегом не пользовался. Почему он у меня не работает если я ему задаю брейкпоинты типа max-width? Если задаю брейкпоинт типа min-width то он срабатывает. Дело в том что на одном блоке он отрабатывает нормально, возможно из-за того что картинка не фоновая.
Но вот в этом блоке картинка не фоновая но тут не срабатывает по какой то причине тег picture(возможно дело не в нем)
. Подскажите пожалуйста в чем может быть проблема? Фоновые картинки обязательно должны быть вставлены через picture а не через background-image. Вот сайт. И еще вопрос правильно ли я сверстал блоки с фоновыми картинками? Как нибудь можно сделать так что бы при уменьшении экрана они обрезались с обоих сторон а не только с правой стороны?

Answer 1

[Сергей Котов]

object-fit: cover

Comments

[Вадим Ягофаров]

Спасибо. А почему не подставляется изображение дя определенного брейкпоинта если изображение есть и оно доступно подскажите пожалуйста

[Иван Гордиенко]

Вадим Ягофаров, если примитивно разъясняться, то когда Вы задаете конкретные ширины и вообще размеры для контейнера, а размер изображения отличается от оных, то ему нужно задать, как замещаемому объекту располагаться внутри. Конкретно object-fit и определяет, как объект будет подогнан к краям контейнера.

[Вадим Ягофаров]

Спасибо большое

[Акваланг]

А куда добавить object-fit: cover ?

[Сергей Котов]

Дмитрий Фролов,

.your-image-class{
    object-fit: cover
}