在CSS網格中保留長寬比

Question

我正在嘗試實現包含3x4元素的響應式網格。 我還在每個單元格中使用位圖圖像，因此我想保留每個單元格的長寬比。 我現在遇到的問題是，我的CSS不能防止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: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;
}

Answer 2

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