CSSグリッドでのアスペクト比の保存

Question

3x4要素を含むレスポンスグリッドを実装しようとしています。また、各セルのビットマップイメージを使用しているため、各セルの縦横比を維持したいと考えています。私が今行っている問題は、私のCSSがビューポートの垂直サイズをオーバーフローさせないようにしていることです。横軸をスケーリングするときは問題ありません。予想通り

作品：予想通り

は（スクロールバーを作成します）は動作しません：

CodePenへのリンク：http://codepen.io/ekulabuhov/pen/JEyxby?editors=1100

.container{ 
 
    height:100vm; width:100vm; /* IE9 fallback */ 
 
    width: 100vmin; height: 100vmin; 
 
    position: absolute; 
 
    top:0;bottom:0; 
 
    left:0;right:0; 
 
    margin: auto; 
 
} 
 

 
.gametile { 
 
    background: url('http://adrianpayne.me/game/assets/images/grass.png') no-repeat; 
 
    background-size: cover; 
 

 
    /* 33.3vmin; */ 
 
    width: calc(100vmin/3); 
 
    float:left; 
 
    height: calc(100vmin/3*(91/70)); 
 
    margin-top: -16vmin; 
 
} 
 

 

 
/*** FOR THE DEMO **/ 
 
body,html {margin:0;background:#123752;color:#fff;} 
 
a{color:#ccc;}

<div class="container"> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 

 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
</div>

Answer 1

.container{ 
 
    height:100vm; width:100vm; /* IE9 fallback */ 
 
    width: calc(((100vmin - 16vmin)/4 + 16vmin) * (70/91) * 3); 
 
    height: 100vmin; 
 
    position: absolute; 
 
    top:0;bottom:0; 
 
    left:0;right:0; 
 
    margin: auto; 
 
} 
 

 
.gametile { 
 
    background: url('http://adrianpayne.me/game/assets/images/grass.png') no-repeat; 
 
    background-size: cover; 
 

 
    /* 33.3vmin; */ 
 
    width: calc(100%/3); 
 
    float:left; 
 
    height: calc((100% - 16%)/4 + 16%); 
 
    margin-bottom: -16vmin; 
 
} 
 

 

 
/*** FOR THE DEMO **/ 
 
body,html {margin:0;background:#123752;color:#fff;} 
 
a{color:#ccc;}

<div class="container"> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 

 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
    <div class="gametile"></div> 
 
</div>

それはIE9で動作するかどうかを知っているが、私はあなたのためにそれを固定しないでください。それはおそらくIEの何かで動作しません。古いブラウザをあきらめても、display: gridを試すことができます。

Answer 2

私は値を使って遊んだり、外に出ることなく画面の中央に置くことができました。

.container{ 
    height:60vm; width:100vm; /* IE9 fallback */ 
    width: 100vmin; height: 60vmin; 
    position: absolute; 
    top:0;bottom:0; 
    left:0;right:0; 
    margin: auto; 


} 

.gametile { 
    background: url('http://adrianpayne.me/game/assets/images/grass.png') no-repeat; 
    background-size: cover; 

    /* 33.3vmin; */ 
    width: calc(80vmin/3); 
    float:left; 
    height: calc(80vmin/3*(91/70)); 
    margin-top: -16vmin; 
}