Как масштабировать / перемещать дочерние изображения в контейнере относительно масштабирования изображения отца в контейнере? - PullRequest
Новая
       14

Как масштабировать / перемещать дочерние изображения в контейнере относительно масштабирования изображения отца в контейнере?

0 голосов
/ 04 марта 2019

У меня есть изображение отца в контейнере и несколько кликабельных значков сверху этого изображения с абсолютной позицией.

Теперь я хочу масштабировать изображение отца до максимальной ширины: 100%

Теперь я хочу, чтобы значки, расположенные в абсолютном положении, вели себя относительно изображения отца, чтобы они всегда находились в одном и том же месте на изображении отца.

Вот мой кодпока что: 

.container {
  position: relative;
  top: 0;
  left: 0;
}

.father-image {
  position: relative;
  top: 0;
  left: 0;
}

.icon_pos {
  position: absolute;
  top: 50px;
  left: 50px;
}

.icon {
  width: 20em;
  height: 5em;
  background: url("icon.png") no-repeat;
  background-size: 20em;
  display: fill;
}

.icon:hover {
  width: 20em;
  height: 5em;
  background: url("icon_hover.png") no-repeat;
  background-size: 20em;
}

<div class="container">
  <img class="father-image" src="father-image.png">

  <div class="icon_pos">
    <a href="SOME_LINK">
      <div class="icon"></div>
    </a>
  </div>
</div>

Этот код работает, как и ожидалось.Отцовское изображение отображается, и значок имеет позицию 50/50 и является интерактивным.

Нет. Я хочу масштабировать отцовское изображение до 100% (добавление 'max-width: 100%' к классу ').отец-образ »).Если я это сделаю, изображение будет полностью видно на экране, но значок останется на 50/50, что не является необходимым поведением, поскольку оно также должно перемещаться / масштабироваться относительно изображения отца.

У кого-нибудь есть идея?

1 Ответ

0 голосов
/ 04 марта 2019

Если я вас правильно понял, вам просто нужно установить позицию ".icon_pos" в% от ".container" 

.icon_pos {
    position: absolute;
    top: 5%;
    left: 5%;
}

update 1

, это изменит ваш контейнер "icon_pos"ширина и высота на основе ".container" 

.icon_pos 
{
      position: absolute;
      top: 5%;
      left: 5%;
      width: 20%;
      height: 20%;
 }

Вы также должны установить размер иконки на 100% от "icon_pos" 

.icon 
{
     width: 100%;
     height: 100%;
}
...