Как адаптировать абсолютно позиционированные элементы?

Question

[Дмитрий Нефёдов]

Добрый день.
Подскажите как в данном случае сделать чтобы фотографии composition__photo_top, /_botton, /_average вели себя статично при изменении ширины страницы, при адаптиве. Сейчас при изменении ширины все расползается. если у composition поставить ширину в процентах, проблема решится, но фото не будут масштабироваться

<div class="composition-wrapper">
  <article class="composition">
    <img class="composition__photo composition__photo_top" src="https://www.iguides.ru/upload/medialibrary/9f8/9f8fdff471b7d281f81f694c100b5adc.png" alt="">
    <img class="composition__photo composition__photo_average" src="https://10-raisons.fr/wp-content/uploads/2022/02/10-raisons-s-interesser-aux-nft.jpg" alt="">
    <img class="composition__photo composition__photo_bottom" src="https://www.kfadv.it/wp-content/uploads/2022/02/Bored_Apes.jpg" alt="">
  </article>
</div>

.composition-wrapper {
  padding-top: 200px;
  width: 100%;
  height: 600px;
  background: grey;
}

.composition {
  margin: 0 auto;
  position: relative;
  width: 80%;
  height: 420px;
  background: yellow;
}

.composition__photo {
  width: 40%;
  position: absolute;
}

.composition__photo_top {
  top: 15%;
  right: 18%;
  z-index: 2;
}

.composition__photo_average {
  top: 25%;
  left: 20%;
  z-index: 1
}

.composition__photo_bottom {
  top: 35%;
  left: 35%;
  z-index: 3;
}

Comments

[Ankhena]

Например, позиционировать от центра.

[Дмитрий Нефёдов]

Ankhena, Можете показать на моем примере как это сделать?

[Ankhena]

Дмитрий Нефёдов,
типа того

left: calc(50% - 29px);
transform: translateX(-50%);

29px от балды

Ближайший аналог https://codepen.io/AnnaSummer/pen/QWQOvzy

[cssfish]

не видя макета конечно сказать сложно, но...

Чтобы фото масштабировались, им хотя бы ширину указать надо в %.
А лучше всего и оберткам и картинкам задавать соотношение сторон. Тогда адаптив получится сам собой!

Answer 1

[KERSOR]

Делай через media запросы

Answer 2

[QBT]

не обязательно в этом случае писать кучу медиа запросов, можно задать родителю адаптивные размеры (можно имcпользвать те же проценты, или vw), а дочерним компонентам указать процент от родителя, и забыть про пиксели