保留CSS网格中的宽高比

I'm trying to implement responsive grid containing 3x4 elements. I'm also using a bitmap image for each cell so I would like to preserve the aspect ratio of each cell. The problem I'm having now, is that my CSS doesn't prevent it from overflowing the vertical size of the viewport. It works fine when scaling on the horizontal axis.

我正在尝试实现包含3x4元素的响应式网格。我也在为每个单元格使用位图图像，所以我想保留每个单元格的纵横比。我现在遇到的问题是，我的CSS不会阻止它溢出视口的垂直大小。在水平轴上缩放时，它工作正常。

Works as expected:

按预期工作：

Doesn't work as expected (creates a scrollbar):

不能按预期工作（创建滚动条）：

Link to CodePen: http://codepen.io/ekulabuhov/pen/JEyxby?editors=1100

链接到CodePen：http：//codepen.io/ekulabuhov/pen/JEyxby？edit = 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>

2 个解决方案

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

Don't know if it works in IE9, but I fixed it for you. It probably won't work in IE anything. You can also try display: grid if you give up on older browsers.

不知道它是否适用于IE9，但我为你修复了它。它可能不适用于IE中的任何东西。如果您放弃旧浏览器，也可以尝试显示：grid。

#2

I played around with the values and managed to center it on the center of the screen without going out of bound.

我玩弄了这些价值观，并设法将其置于屏幕中心而不会超出界限。

.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;
}