怎么修 elements so that they only scale when resizing the browser window?

Question

注意：我知道代码很长，但它只是在一个部分中一遍又一遍地重复相同的形状。我是HTML和CSS的菜鸟，所以我能得到的任何帮助都会很好。你好。我已经坚持了几天这个问题了。我想要编写的个人网站的一部分由一堆六边形组成，这些六边形以几乎类似于蜂窝的方式彼此相邻。唯一的问题是，当我调整页面大小时，这些六边形要么垂直移动，要么水平移动，导致彼此重叠。我试过用这些方法解决这个问题：

1.）将所有六边形放在一个大的div中。这会导致它们保持静止，但由于某种原因，它不允许我调整垂直和水平值

2.）将位置方面调整为相对，绝对，静态和粘性。只有相对和绝对允许重​​新定位。问题仍然存在。

3.）使用像素而不是百分比作为顶部，右侧和底部值。

当有人调整浏览器窗口时，我只想让蜂窝的整体缩放在一起。现在，每个人都会自己水平和垂直地调整。如果有人能提供一些帮助，我们将不胜感激。

HTML：

<section class="Aspirations">
        <div class="Aspirations_Box">

            <div class="HeaderHexBox">
                <img class="header" src="Hex_Intro_Temp.png" alt="header">
            </div>

            <div class="Hex1Box">
                <img class="hex1" src="Shanghai_Hex.png" alt="hex1">

                <img class="hex1T" src="HexText3.png" alt="hex1T">
            </div>

            <div class="Hex2Box">
                <img class="hex2" src="Unreal_hex.png" alt="hex2">

                <img class="hex2T" src="HexText3.png" alt="hex2T">
            </div>

            <div class="Hex3Box">
                <img class="hex3" src="Engineering_Hex.png" alt="hex3">

                <img class="hex3T" src="HexText3.png" alt="hex3T">
            </div>

            <div class="IllustratorBox">
                <img class="Illustrator" src="Goals_Illustrator.png" alt="Illustrator">
            </div>

            <div class="Hex4Box">
                <img class="hex4" src="Blizzard_Hex.png" alt="hex4">

                <img class="hex4T" src="HexText3.png" alt="hex4T">
            </div>

            <div class="Hex5Box">
                <img class="hex5" src="Chinese_hex.png" alt="hex5">

                <img class="hex5T" src="HexText3.png" alt="hex5T">
            </div>

            <div class="Hex6Box">
                <img class="hex6" src="vr_heX.png" alt="hex6">

                <img class="hex6T" src="HexText3.png" alt="hex6T">
            </div>

            <div class="PhotoshopBox">
                <img class="Photoshop" src="Goals_Photoshop.png" alt="Photoshop">
            </div>

            <div class="Hex7Box">
                <img class="hex7" src="PackHacks_hex.png" alt="hex7">

                <img class="hex7T" src="HexText3.png" alt="hex7T">
            </div>
        </div>
</section>

CSS：

.Aspirations {
background: url(Aspirations_Header_2.png);
background-repeat: no-repeat; 
background-position: center;      
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:275%;
width:auto;
}

.Aspirations_Box {
    position: relative;
    height: 100%;
    width: auto;
    overflow: hidden;
}

.header {
  position: relative;
  width: 90%;
  height: auto;
  top: 3.5%;
  left: 12.0%;
  overflow: hidden;
}

.Hex1Box {
  position: absolute;
  width: 100%;
  height: auto;
  top: 375px;
  left: -100px;
  z-index: 1;
}

.hex1 {
  position: relative;
  width: 30%;
  height: auto;
  top: 20%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex1T {
  z-index: 1;
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
}

.IllustratorBox {
  position: relative;
  width: 110%;
  height: auto;
  top: -1px;
  left: 900px;
  z-index: 8;
}

.Illustrator {
  filter: drop-shadow(0 0 0.75rem black);
  position: relative;
  width: 36%;
  height: auto;
  top: 15%;
  left: -31.8%;
}

.Hex2Box {
  position: absolute;
  width: 100%;
  height: auto;
  top: 700px;
  left: -1035px;
  z-index: 2;
}

.hex2 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex2T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Hex3Box {
  position: relative;
  width: 100%;
  height: auto;
  top: 1300px;
  left: -200px;
  z-index: 3;
}

.hex3 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex3T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Hex4Box {
  position: relative;
  width: 70%;
  height: auto;
  top: -245px;
  left: -100px;
  z-index: 4;
}

.hex4 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex4T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Hex5Box {
  position: relative;
  width: 70%;
  height: auto;
  top: 200px;
  left: 100px;
  z-index: 5;
}

.hex5 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex5T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Hex6Box {
  position: relative;
  width: 70%;
  height: auto;
  top: 200px;
  left: -100px;
  z-index: 6;
}

.hex6 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex6T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Hex7Box {
  position: relative;
  width: 70%;
  height: auto;
  top: 200px;
  left: -100px;
  z-index: 7;
}

.hex7 {
  position: relative;
  width: 30%;
  height: auto;
  top: 15%;
  left: 64.5%;
  z-index: 2;

   transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.hex7T {
  position: absolute;
  width: 30%;
  height: auto;
  top: 23.2%;
  right: 5.5%;
  z-index: 1;
}

.Photoshop {
  filter: drop-shadow(0 0 0.75rem black);
  position: relative;
  width: 23%;
  height: auto;
  top: 200px;
  left: 100px;
  z-index: 12;
}

任何帮助将不胜感激。谢谢！

Answer 1

根据我的理解，当用户更改viewport宽度时，您想要缩放一组图像形成的图像？ 你为什么不用一张图片？ 或者你可以使用svg，更容易操纵。 如果你可以上传jsfiddle，我们可以看到你需要什么，并帮助你。