Как адаптивно наложить картинку на картинку средствами CSS?

Question

[Андрей Кривенко]

Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.

Answer 1

[Денис Букреев]

Попробуй картинке с футболкой это дать:

display: block;
position: relative;
width: 90%; /* это не важно */

А поверх дай картинке вот такую бороду:

display: block;
width: 30%; /* это наверное уже у тебя в js будет вычисляться */
position: absolute;
top: 22%; left: 40%; /* тоже через js будешь вычислять */

Comments

[Олег Ободин]

Распишите пожалуйста подробнее(

Answer 2

[Павел Радьков]

SVG вам в помощь. codepen.io/paulradzkov/pen/QjxZzN?editors=100

Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.

Comments

[Андрей Кривенко]

Павел спасибо Вы предложили отличное решение моей проблемы - супер!!! Попробовал все отлично работает на любых разрешениях, ничего не плывет и не сьежает.

[Андрей Кривенко]

Павел подскажите пожалуйста из-за чего у меня изображения теряют в качестве? Мелкая елочка появляется. Я так подозреваю что нужно правильно выставить следующие значения?
viewBox="0 0 1000 1000"
Не могли бы Вы подсказать за что отвечают эти значения? Это пиксели, проценты или какой то масштаб? Что это?
Заранее большое спасибо!

[Павел Радьков]

Андрей Кривенко: Картинка майки в моем примере размером 1000×1000px, поэтому и viewBox="0 0 1000 1000" — размер полотна, в котором единицы измерения совпадают с пикселями. (x y width height)

А width="100%" height="100%" на элементе svg — это html-аттрибуты, такие же, как для img. Вы их можете убрать, переопределить через css и т.д.

Вам нужно во viewBox вписать размеры вашей картинки с майкой. Координаты x="0" y="0" — это точка монтирования — левый верхний угол картинки. Он совпадает с началом координат. height="1000" width="1000" — размеры картинки (в пикселях, но без указания единиц измерения). Для майки должны совпадать с viewBox.

Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.

[Андрей Кривенко]

Павел Радьков: Спасибо большое за такой развернутый ответ. Видимо svg не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((

[Павел Радьков]

Да. Гладко отображается только в webkit браузерах. Это печально.