Как разместить изображение подобным образом?

Question

[Gidroce]

Comments

[Антон Антон]

Это не изображение такое, это у него тень такая

[Gidroce]

Антон Антон, а как такое сделать? Я думал тень это сзади белая подложка

[ThunderCat]

А в чем проблема? Как вставить картинку в див?

[Gidroce]

ThunderCat, вставить не проблема, а разместить, чтобы при уменьшении экрана она не съезжала, вот это проблема. Если ставить ей width в процентах, то при уменьшении и увеличении экрана она становится то больше, то меньше (ну оно и понятно) и сползает с места, а если ставить фикс. размер в пикселях, то в зависимости от экрана это будет смотреться по разному

[sharpsss]

Gidroce, ставь фикс ей, используй clamp() , если не шаришь и нету времени разбираться то - https://clamp.font-size.app/?config=eyJyb290IjoiMT... заходи сюда вписывай в максимальное значение размер который поставил и размер экрана в максимальный размер вью порта (тот размер на котором ты верстаешь сча) птм минималку 320 и ширину которая на сотке должна быть и высоту также это всё в пикселях ту штуку которую выдаст копируй чисто clamp ах да и на тебе тень

box-shadow: 0.19vw -0.2vw 0 ##ffffff, 0.32vw -0.13vw 0 ##ffffff, 0.19vw -0.32vw 0 ##ffffff, 0.32vw -0.32vw 0 ##ffffff;

тут тоже размеры под себя подстроишь в этой тени я рандомно скопировал у себя с прошлых проектов, надеюсь понятно объяснил

[Gidroce]

sharp97, я уже по своему сделал, за способ спасибо

[sharpsss]

Gidroce, аа кул, да пожалуйста)

[Nik Faraday]

Gidroce, вставьте в ответ и отметьте верным, а лучше, можете ещё поменять название самого вопроса, вдруг кто-то будет искать, поможете начинающим )

Answer 1

[Спартак]

Привет. Картинку можно сделать так: Сделать 2 блока, один белый второй с картинкой внутри, Блоку с картинкой задать transform: translate(-20px, -20px); Вариант второй: Разместить блок с картинкой внутри белого блока и задав блоку с картинкой position: absolute; при помощи left и top вывести картинку куда надо. Белому блоку position: relative; разумеется.