Jump to content

vados

Newbie
  • Posts

    4
  • Joined

  • Last visited

Everything posted by vados

  1. У меня еще один вопрос возник. Применяю медиа к картинке. По идее код должен срабатывать, когда ширина экрана меньше 1400px, но срабатывает значительно позже (на скриншоте указал стрелкой, где срабатывает данный код), это как-то странно: @media screen and (max-width: 1400px) { .header { background-size: contain; background-position: top; } }
  2. Понял Вас. На мобильных разрешениях применяю contain, затем с помощью медиа на большых разрешениях применяю cover. Спасибо, не подумал об этом.
  3. Дело в том, что я пишу, что мне неудобен тег img, мне как раз нужно сделать это через background-size. И именно про background-size: contain я и говорю, что на больших разрешениях появляются пробелы по бокам.
  4. Всем доброго времени суток, друзья! Возник вопрос по поводу верстки изображения в блоке 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, то все, вроде, получается, но на больших разрешениях появляются отступы по бокам изображения.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy