Как сделать элементы, как на фото?

Question

[Александр Тихонович]

Как сделать такой элемент? Нужно, чтобы размер автоматически менялся в зависимости от ширины экрана и чтобы можно было заменить фото на девайсе.

Comments

[Ankhena]

Читайте про
background-size
object-fit
aspect-ratio
picture
и т.д.
И немножко банальной геометрии

Answer 1

[Михаил Р.]

Нужно чтобы размер автоматически менялся в зависимости от ширины экрана

background-size: cover: https://developer.mozilla.org/en-US/docs/Web/CSS/b...

и чтобы можно было заменить фото на девайсе

picture > source/img: https://developer.mozilla.org/en-US/docs/Web/HTML/... (можно менять изображения в зависимости от различных параметров дисплея).

Answer 2

[B14DbIK4]

Имеются похожие готовые решения в ссылке: https://flowbite.com/docs/components/device-mockups/