Wie skaliere ich div basierend auf Bildschirmauflösung

Question

Ich erstelle eine Landing-Page mit einigen interessanten Idee des Menüs. Es ist mit maßgeschneiderten Sechsecken gebaut. Ich möchte diese Hexacgons machen, um den ganzen Bildschirm basierend auf der Bildschirmauflösung zu füllen. Grundsätzlich möchte ich sie an den Bildschirm anpassen lassen, ohne scrollen zu müssen. meiner Website: http://new.glstudios.lv/

<div class='grid'> 
<div onclick="location.href='';" id="smallbox" ; class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Snowy Hills</h2> 
     <div class='desc'>Photo by Ales Krivec</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Bear</h2> 
     <div class='desc'>Photo by Thomas Lefebvre</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Owl</h2> 
     <div class='desc'>Photo by photostockeditor</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Horse</h2> 
     <div class='desc'>Photo by Annie Spratt</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Ice & Penguin</h2> 
     <div class='desc'>Photo by Teodor Bjerrang</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Pile of Logs</h2> 
     <div class='desc'>Photo by Ales Krivec</div> 
    </div> 
    </div> 
    <div class='grid--item'> 
    <div class='img' style='background-image: url();'></div> 
    <div class='container'> 
     <h2>Winter Tree</h2> 
     <div class='desc'>Photo by Mikael Kristenson</div> 
    </div> 
    </div> 
</div> 

Und mein CSS.

#smallbox { 
    cursor: pointer; 
} 
.x-main.full { 
    float: none; 
    display: block; 
    width: auto; 
    background:black; 
} 
@import url(https://fonts.googleapis.com/css?family=Arapey:400italic); 
body { 
    background: white; 
    -webkit-font-smoothing: antialiased; 
    min-width: 1200px; 
} 

.grid { 
    padding: 60px; 
    margin: 0 auto; 
    max-width: 1200px; 
} 

.grid--item { 
    position: relative; 
    margin-top: -90px; 
    margin-right: 5px; 
    margin-left: 5px; 
    width: calc(33.33% - 10px); 
    float: left; 
    transition: all 0.5s; 
    overflow: hidden; 
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
} 
.grid--item:before { 
    display: block; 
    padding-top: 112.5%; 
    content: ''; 
} 
.grid--item:nth-child(1), .grid--item:nth-child(2) { 
    margin-top: 0; 
} 
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) { 
    margin-left: 185px; 
} 

.img { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-position: center center; 
    background-size: cover; 
    overflow: hidden; 
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
} 
.img:before, .img:after { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    opacity: 0; 
    transition: opacity 0.5s; 
} 
.img:before { 
    background: rgba(128, 0, 128, 0.25); 
} 
.img:after { 
    background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent); 
} 

.container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    opacity: 0; 
    text-align: center; 
    color: white; 
    will-change: transform; 
    backface-visibility: hidden; 
    transform: translate(-50%, -50%) scale(0.9); 
    transition: all 0.5s; 
    -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
    shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
} 

h1, 
h2 { 
    font-family: 'Arapey'; 
    font-style: italic; 
    font-weight: 400; 
} 

h1 { 
    margin-top: 90px; 
    text-align: center; 
    font-size: 56px; 
    color: white; 
} 

h2 { 
    font-size: 32px; 
    color:white; 
} 
h2:before, h2:after { 
    display: inline-block; 
    margin: 0 0.5em; 
    width: 0.75em; 
    height: 0.03em; 
    background: turquoise; 
    content: ''; 
    vertical-align: middle; 
    transition: all 0.3s; 
} 

.desc { 
    margin: 1em 0 0; 
    font-family: 'ATC Overlook'; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 11px; 
    line-height: 1.5; 
    color: turquoise; 
} 

.grid--item:hover .img:before, 
.grid--item:hover .img:after, 
.grid--item:hover .container { 
    opacity: 1; 
} 
.grid--item:hover .container { 
    transform: translate(-50%, -50%) scale(1); 
} 

Answer 1

Ihre HTML Unter der Annahme, ist so etwas wie diese:

<div id="test-div"></div> 

Sie dies tun könnten:

$(window).resize(function() { 
    $('#test-div').css('width', $(window).width()); 
    $('#test-div').css('height', $(window).height()); 
}); 

Aber es ist sehr schwer zu sagen, ohne dass Sie Ihren aktuellen HTML/Javascript-Code veröffentlichen.

Answer 2

Sie könnten auch versuchen, style = "overflow: auto" nach dem Divider-Tag hinzuzufügen.

Answer 3

Ich denke, Sie möchten Javascript oder Jquery verwenden, um die CSS bei der Größenänderung zu ändern. Etwas entlang der Linien von:

$(window).resize(function() { 
    $('.container').css('transform','translate(-50%, -50%) scale(dynamicvaluehere);'); 
}); 

Sie wollen werden Ihre dynamicvaluehere Variable basierend auf Fensterhöhe und Fensterbreite berechnen.