화면 해상도에 따라 div의 크기를 조정하는 방법

Question

나는 재미있는 메뉴 아이디어로 방문 페이지를 만들고 있습니다. 그것은 맞춤형 육각형으로 제작되었습니다. 나는 화면 해상도에 따라 모든 화면을 채우기 위해이 육각형을 만들고 싶습니다. 기본적으로 스크롤 할 필요없이 화면에 적용되도록하고 싶습니다. 내 웹 사이트 : 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> 

그리고 내 CSS.

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

당신은이 작업을 수행 할 수 있습니다 :

#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

은 HTML을 가정하면이 같은 것입니다

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

을하지만 그것은 당신이 실제 HTML/자바 스크립트 코드를 게시하지 않고 이야기하는 것은 매우 어렵다.

Answer 2

divider 태그 뒤에 style = "overflow : auto"을 추가 할 수도 있습니다.

Answer 3

JavaScript 또는 jquery를 사용하여 크기 조정시 CSS를 변경하고 싶을 수 있습니다. 의 라인을 따라 뭔가 : 당신은 창 높이와 창 너비에 따라 dynamicvaluehere 변수를 계산하는 것이 좋습니다

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

.