Question

我有一张3x3的桌子，里面有图片。我希望桌子与窗户的宽度和高度一致。

使用宽度进行缩放不是问题，并且到目前为止工作，但我没有使用高度。目的是看到整个表格在图像之间没有间隙。如果图像处于100％，那么表格应该停止增长，因此不会强制100％。这只能在CSS中使用吗？

感谢您的帮助

这是我到目前为止所得到的：

  <head>
    <style>
      * { margin: 0;padding: 0; line-height: 0;}
      html, body
      {
        height: 100%;
      }
      #imgHolder {
        max-width:100%;
        max-height:100%;
        height: auto;
        width:auto;
        border-collapse: collapse;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <table id="imgHolder">
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
      <tr>
        <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
      </tr>
    </table>
  </body>

这是一个小提琴：https://jsfiddle.net/xhaqzzkj/

Answer 1

要设置窗口高度，请使用视口高度vh，例如100vh或98vh：

并使用calc()，例如calc(100vh - 16px)，假设您使用的是现代浏览器。

既然你也有这个要求：

如果图像处于100％，那么表格应该停止增长，因此没有强制100％

你的意思是，如果图像不是那么大，不要强迫它们变大，只是为了使表格100％的视口宽度和高度？

如果是这样，您似乎可以拥有一个包含这些图片的表格，但max-width和max-height分别为100vw和100vh。

或者您可以将td和图片设为max-width: 33vw和max-height: 33vh，例如以下示例：https://jsfiddle.net/xhaqzzkj/7和https://jsfiddle.net/xhaqzzkj/8

比例表的宽度和高度

1 个答案: