Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке 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, то все, вроде, получается, но на больших разрешениях появляются отступы по бокам изображения.
