时间戳

首页 > 解决方案 > 围绕另一个图像对齐图像？

html - 围绕另一个图像对齐图像？

问题描述

我希望小行星图像以合理的距离随机分布在主徽标（标题 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;
}

标签： htmlcssparticles.js

解决方案

您是否考虑过使用display: flex来定位您的图像？我认为这是实现您所描述的响应版本的最灵活的方法。

尝试http://flexbox.help/尝试使用不同类型的定位，并考虑您希望布局在不同屏幕尺寸上的外观。这也应该有助于您的滚动问题。

推荐阅读