Позиционировать изображения относительно другого изображения, оставаясь отзывчивым - PullRequest
Новая
       22

Позиционировать изображения относительно другого изображения, оставаясь отзывчивым

0 голосов
/ 03 октября 2018

Я пытаюсь расположить некоторые изображения поверх другого изображения (фоновый круг).Расположение этих изображений должно соответствовать текущему размеру фонового изображения (отзывчиво).Как мне этого добиться?Непосредственное позиционирование изображений с использованием относительных положений?

Что у меня сейчас есть: HTML: 

<main>
    <img src="bg-image.png" id="bg-image" class="clear">
    <div></div>
</main>

ПРИМЕЧАНИЕ. Если вместо изображения не будет отображаться изображение.Я не знаю почему.

CSS: 

main {
    background: #f9f9da;
    display: block;
    position: relative;
    height: 100%;
    width: inherit;
    padding-bottom:0;
    text-align: center;
}

img {
    height: 100%;
    width: auto;
}

Это прекрасно работает.Я получаю изображение, которое отзывчиво, и меняю его размер, чтобы он не растягивался по размеру экрана.

Но следующим шагом является размещение изображений в определенных местах, близких к # bg-изображению, например: верхний левый угол, центри т.д.

Как я могу это сделать?Заранее спасибо.

1 Ответ

0 голосов
/ 03 октября 2018

Я не уверен, что понимаю, но так ли это?

Положение изображения относительно оболочки # bg-image

https://codepen.io/anon/pen/qJZWev

<main>
  <div id="wrapper">
    <img src="http://blog.visme.co/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-03.jpg" id="bg-image" class="clear">
    <div id="other-images">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />
    </div>
  </div>
</main>


main {
  background: #f9f9da;
  position: relative;
  text-align: center;
}

#bg-image {
  height: 100vh;
  max-width: 100%;
  object-fit: cover;
  width: auto;
}
#wrapper {
  display: inline-block;
  position: relative;
}

#other-images {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

#other-images img {
  max-width: 50%;
}
...