адаптивное изображение с центром поверх другого адаптивного изображения - PullRequest
Новая
       15

адаптивное изображение с центром поверх другого адаптивного изображения

2 голосов
/ 27 марта 2019

Я просто не могу найти лучший способ заставить реагирующее изображение сидеть в центре другого адаптивного изображения.

Прямо сейчас у меня есть адаптивное изображение, с другим изображением, расположенным абсолютно по центру сверху. Когда я пытаюсь установить ширину для этого второго изображения, оно больше не центрируется.

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

Что я могу сделать?

Спасибо

Вот скрипка 

<div class="container">
<img class="background" src="https://via.placeholder.com/560x500/FFFF00/">
<div class="logo"><img src="https://via.placeholder.com/300x120"></div>
</div>

.container{
  position: relative;
}

.container .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container .background {
  width: 100%;
}

Ответы [ 2 ]

2 голосов
/ 27 марта 2019

Вы можете использовать flexbox для центрирования. 

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .logo {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* size of second image */
.container .logo>img {
  width: 100px;
}

.container .background {
  width: 100%;
}
<div class="container">
  <img class="background" src="https://via.placeholder.com/560x500/FFFF00/">
  <div class="logo"><img src="https://via.placeholder.com/300x120"></div>
</div>
1 голос
/ 27 марта 2019

Это неплохое решение само по себе, но вы бы упростили себя, если:

  • Вы бы использовали background-image: src("url_here") вместо элемента background (поэтому удалите этот узел DOM и присоедините CSS к .container
  • центрируйте второй div внутри него, используя margin: 0 auto; или margin: auto; (если это элемент block и имеет ширину / высоту)

Это должно предотвратить некоторые проблемы, с которыми вы сталкиваетесь, и полностью исключит необходимость абсолютного позиционирования и трансформации. Однако увеличение размера второго изображения по сравнению с контейнером, в котором оно находится, станет проблемой (поскольку оно больше не выходит за пределы родительского).

Очевидно, что это также можно сделать с помощью Flexbox или любого другого метода макета. Но это самый простой способ добиться этого.

...