如何根据屏幕分辨率调整div的大小

-2

我正在创建一个带有一些有趣菜单的着陆页。它是用定制的六角形建造的。我想让这些六角形根据屏幕分辨率填满所有屏幕。基本上我想让它们适应屏幕而不需要滚动。我的网站：http://new.glstudios.lv/如何根据屏幕分辨率调整div的大小

<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。

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

来源

2016-08-04 Reinis Krūmiņš

请发布您的代码，以便我们可以真正帮助您。 – TrampolineTales

我以前做过这个......你需要在Javascript中做很多的数学运算。首先你会发现屏幕的高度和宽度，然后你会发现哪一个是限制你的屏幕（它在纵向和横向上会有所不同），最后决定每个六角形的大小应该是多少。我用三角形做了这个，不得不刷上三角形来完成它。祝你好运！ –

假设你的HTML是这样的：

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

你可以这样做：

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

但它很难说没有你发布你的实际的HTML/Javascript代码。

来源

2016-08-04 13:59:50 TrampolineTales

您也可以尝试在divider标签后添加style =“overflow：auto”。

来源

2016-08-04 14:49:21

我想你可能想使用JavaScript或jQuery来改变调整大小的CSS。沿线的东西：

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

你会想基于窗口的高度和窗口宽度来计算你的dynamicvaluehere变量。

来源

2016-08-04 15:01:47 Brian

如何根据屏幕分辨率调整div的大小

回答

相关问题