在 CSS 网格中保持纵横比

Question

我正在尝试实现包含 3x4 元素的响应式网格。我还为每个单元格使用位图图像，因此我想保留每个单元格的纵横比。我现在遇到的问题是，我的 CSS 无法阻止它溢出视口的垂直尺寸。在水平轴上缩放时效果很好。

按预期工作：

没有按预期工作（创建滚动条）：

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

在 CSS 网格中保持纵横比

Preserving aspect ratio in a CSS grid

html

css

aspect-ratio

grid-layout