在屏幕中的方形表配件

Question

我想创建一个正方形且包含正方形的表格。整个表必须适合窗口内部而不滚动。这有点难以解释，这是我想要的图像：

这可能吗？到现在为止，我有这个，但它并不是我想要的......

FIDDLE

＆＃13;

＆＃13;

table {
  width: 100%;
}

td {
  width: 30%;
  position: relative;
}

td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

td img {
  width: 100%;
  height: 100%;
}

＆＃13;

<table>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果要填满整个高度：

＆＃13;

＆＃13;

body {
  margin: 0;
}

table {
  margin: auto;
  width: 100vh;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  width: 33.33%;
}

img {
  width: 100%;
  display: block;
}

/* take care of portrait orientation or ratio */

html {
  height: 100%;
  display: flex;
}

body {
  margin: auto;
}

table {
  max-width: 100vw;
}

＆＃13;

<table>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
    <td>
      <div class="content"><img src="http://placehold.it/128"></div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

但如果它进入肖像，你可能需要js来找出窗口的比例（横向/纵向覆盖样式表规则）。 还需要使用媒体查询来定位以将宽度重置为vw单位

Answer 2

这适用于一些jQuery：https://jsfiddle.net/rs136ksc/4/ 将行更改为3（现在为3x3）。

jQuery代码段使您的表格宽度与您的高度完全一样。桌子的高度恰好是窗户的高度。这只适用于每次加载页面时，所以如果你想要它是持久的，你将不得不想出更多的jQuery。祝你好运！

一些添加的CSS：

html, body {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

table {
  margin:0 auto;
  height:100%;
}

jQuery的：

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px'
});