vados

У меня еще один вопрос возник. Применяю медиа к картинке. По идее код должен срабатывать, когда ширина экрана меньше 1400px, но срабатывает значительно позже (на скриншоте указал стрелкой, где срабатывает данный код), это как-то странно: @media screen and (max-width: 1400px) { .header { background-size: contain; background-position: top; } }

Понял Вас. На мобильных разрешениях применяю contain, затем с помощью медиа на большых разрешениях применяю cover. Спасибо, не подумал об этом.

Дело в том, что я пишу, что мне неудобен тег img, мне как раз нужно сделать это через background-size. И именно про background-size: contain я и говорю, что на больших разрешениях появляются пробелы по бокам.

Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке header. для того, чтобы установить изображение фоном в шапке сайта, применяют background-image, я соглашусь с этим конечно. Но тут и возникает ситуация с адаптивностью изображения. Мне нужно, чтобы картинка сжималась, а не обрезалась по краям. Да, при обрезании изображение тоже получается адаптивным, но нужно полностью все изображение в ширину при адаптиве. Есть такое изображение: Таким же оно должно быть и в мобильной версии: С этим прекрасно справляется тег img: img { width: 100%; height: 100%; object-fit: cover; object-position: top; } Но через тег img не удобно в моем случае. Через background-image такой результат: Подскажите, пожалуйста. Если такая возможность, через background-image сделать: Код background-image: .header { height: 100vh; background-image: url(images/picture_header2.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } Если опять же делать background-size: contain и background-position: top, то все, вроде, получается, но на больших разрешениях появляются отступы по бокам изображения.