HTML+CSS адаптив вложенного изображения

Question

Есть два изображения:

Телефон
Любое другое изображение(всегда меняется)

Поверх 1-го изображения должно находиться 2-ое изображение(это изображение всегда меняется), и его размер не всегда одинаков.

Подскажите, пожалуйста, как добиться сохранения адаптивности при различных размерах окна?

Пример:

.phone img {
  max-width: 45%;
  float: right;
}

.embedded_image img {
  margin-right: -35%;
  margin-top: 5%;
}

<div class='phone'>
  <img src="https://www.nicepng.com/png/detail/249-2497836_telephone-call-clipart-mobile-ring-logo.png" alt='Телефон'>
  <div class='embedded_image'>
    <img src="https://spb.zavesa-online.ru/wp-content/uploads/2020/02/icon-telephone-receiver-telephone-receiver-phone_1.png" alt='Картинка'>
  </div>
</div>

Answer 1

Не знаю зачем вам float: right, предлагаю использовать position: absolute;

.container:after для того, чтобы задать высоту. container ширину в 30%, а высота определяется высотой псевдо-контейнера (в данном случае зависит от padding-top).

Посмотрите, будет непонятно - пишите:

.container {
  width: 30%;
  overflow: hidden;
  position: relative;
}

.container:after {
  content: "";
  padding-top: 100%;
  display: block;
}

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -15%);
}

<div class="container">
  <img class="img1" src="https://www.nicepng.com/png/detail/249-2497836_telephone-call-clipart-mobile-ring-logo.png" alt="">
  <img class="img2" src="https://spb.zavesa-online.ru/wp-content/uploads/2020/02/icon-telephone-receiver-telephone-receiver-phone_1.png" alt="">
</div>

БЛОГ НА HUSL

HTML+CSS адаптив вложенного изображения

Ответы (1 шт):