Выровнять изображения вокруг другого изображения? - PullRequest
Новая
       5

Выровнять изображения вокруг другого изображения?

0 голосов
/ 13 января 2019

Я хочу, чтобы небольшие планетарные изображения располагались в случайных местах вокруг основного логотипа (header img) на разумном расстоянии, чтобы вокруг спутника было ощущение, что . Я не могу добиться того же с позиционирования и маржи. Также, когда я вставляю изображения, немного смещается логотип и страница становится прокручиваемой, я не хочу, чтобы страница прокручивалась. Пожалуйста помоги. Спасибо!

Вот мой HTML: 

    <body>

   <div id="particles-js"></div>

    <!-- UP Satellite -->
    <div id="up_sat">
        <img class="sat sat1" src="images/sat/rocket.png"/>
        <img class="sat sat2" src="images/sat/earth.png"/>
    </div>

    <!--- HEADER - LOGO ------>
    <div id="header"><img src="images/header.png" /></div>

   <!-- DOWN Satellite -->
    <div id="down_sat">
        <img class="sat sat3" src="images/sat/jupiter.png"/>
        <img class="sat sat4" src="images/sat/neptune.png"/>
    </div>

   <!-- Particle Script -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="js/main.js"></script>

</body>

Вот мой CSS: 

  html, body {
  margin: 0;
  background-color: #0f1824;
    height: 100%;
    padding:0;
}

canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ================= MAIN BODY ============== */

#header {
    position:relative;
    height: 100%;
    width:100%;
}

#header img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

1 Ответ

0 голосов
/ 13 января 2019

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

Попробуйте http://flexbox.help/ поэкспериментировать с различными типами позиционирования, которые вы можете использовать, и подумайте, как вы хотите, чтобы макет выглядел на экранах разных размеров. Это также должно помочь с вашей проблемой прокрутки.

...