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