Как исправить элементы <div>, чтобы они масштабировались только при изменении размера окна браузера? - PullRequest
Новая
       17

Как исправить элементы <div>, чтобы они масштабировались только при изменении размера окна браузера?

0 голосов
/ 14 сентября 2018

ПРИМЕЧАНИЕ: я знаю, что код длинный, но это просто повторение одной и той же формы снова и снова в разделе. Я новичок в HTML и CSS, поэтому любая помощь, которую я могу получить, была бы полезной. Привет. Я застрял с этой проблемой в течение нескольких дней. Есть раздел моего личного веб-сайта, который я хочу кодировать и который состоит из группы шестиугольников, расположенных рядом друг с другом способом, который почти напоминает соты. Единственная проблема заключается в том, что когда я изменяю размер страницы, эти шестиугольники перемещаются по вертикали или по горизонтали, вызывая перекрытие друг друга. Я попытался исправить эту проблему, используя следующие методы:

1.) Поместить все шестиугольники в одно большое деление. Это заставляет их оставаться статичными, но по какой-то причине не позволяет мне корректировать вертикальные и горизонтальные значения

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;
}

Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

0 голосов
/ 14 сентября 2018

Насколько я понимаю, у вас есть изображение, образованное группой изображений, которые вы хотите масштабировать, когда пользователь меняет ширину viewport?
Почему бы вам не использовать одно изображение?
Или вы можете использовать svg, манипулировать которым намного проще.
Если вы можете загрузить jsfiddle, мы увидим, что вам нужно, и поможем вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...