0

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

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

Поверх 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>

2
  • Легко. Не вижу проблем.
    – Qwertiy
    4 авг 2022 в 11:59
  • добавьте ваши старания - чтобы могли посоветовать 5 авг 2022 в 9:51

1 ответ 1

0

Не знаю зачем вам 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.