vados
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by vados
-
-
8 часов назад, klierik сказал:
В таком случае используйте cover вместо contain. В так же @media для больших разрешений
Понял Вас. На мобильных разрешениях применяю contain, затем с помощью медиа на большых разрешениях применяю cover. Спасибо, не подумал об этом.
-
7 часов назад, klierik сказал:
Здравствуйте
Можно поместить изображение как фон:
На больших разрешениях можно использовать
background-size: contain;
Дело в том, что я пишу, что мне неудобен тег 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, то все, вроде, получается, но на больших разрешениях появляются отступы по бокам изображения.
Вопрос по верстке изображения.
in Practise Templates
Posted
У меня еще один вопрос возник. Применяю медиа к картинке. По идее код должен срабатывать, когда ширина экрана меньше 1400px, но срабатывает значительно позже (на скриншоте указал стрелкой, где срабатывает данный код), это как-то странно: