Вопрос по верстке изображения.

[vados]

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

[klierik]

Здравствуйте

Можно поместить изображение как фон:

  On 11/4/2020 at 1:06 PM, vados said:

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

Expand  

На больших разрешениях можно использовать 

background-size: contain;

 

[vados]

  On 11/4/2020 at 2:13 PM, klierik said:

Здравствуйте

Можно поместить изображение как фон:

На больших разрешениях можно использовать 

background-size: contain;

 

Expand  

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

[klierik]

В таком случае используйте cover вместо contain. В так же @media для больших разрешений

[vados]

  On 11/5/2020 at 4:25 AM, klierik said:

В таком случае используйте cover вместо contain. В так же @media для больших разрешений

Expand  

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

[vados]

  On 11/5/2020 at 4:25 AM, klierik said:

В таком случае используйте cover вместо contain. В так же @media для больших разрешений

Expand  

У меня еще один вопрос возник. Применяю медиа к картинке. По идее код должен срабатывать, когда ширина экрана меньше 1400px, но срабатывает значительно позже (на скриншоте указал стрелкой, где срабатывает данный код), это как-то странно:

@media screen and (max-width: 1400px) {
  .header 
  {
    background-size: contain;
    background-position: top;
  }
}