文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何修复<div>元素，使其仅在调整浏览器窗口大小时进行缩放？

问如何修复<div>元素，使其仅在调整浏览器窗口大小时进行缩放？
EN

Stack Overflow用户
提问于 2018-09-14 08:00:17
回答 1查看 39关注 0票数 0

注意:我知道代码很长，但它只是在一个部分中一遍又一遍重复相同的形状。我是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;
}

任何帮助都将不胜感激。谢谢!

html
css
browser
resize
position
EN

回答 1

Stack Overflow用户

发布于 2018-09-14 08:20:19

据我所知，你有一个由一组图像组成的图像，当用户改变viewport宽度时，你想要缩放它吗？

为什么不使用单一的图像呢？

或者你可以使用svg，操作起来要容易得多。

如果您可以上传jsfiddle，我们可以看到您需要什么，并帮助您。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52323256

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档