无论屏幕大小如何，如何使带有图像的表格适合屏幕？

Question

我创建了一个表格，其中每个td内都有一个正方形图像。我手动设置了它的大小，但是我的老师希望它的设置方式是：如果屏幕更大，图像会变大，以便更好地适合屏幕。屏幕不应该滚动，表格必须适合屏幕尺寸，不能添加任何内容。

CSS没问题，我想尝试使用它，但我什至不知道从哪里开始...

https://jsfiddle.net/8Lb1cuqh/1/

<td>
<img style="height:30px;width30px" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
 </td>

Answer 1

您可以使用此CSS，但不能对高度进行硬编码，否则图像会失真，请使用min-height:或自动计算出更好的最小宽度高度以保持宽高比不变。

table {
    width: 100%;
}
td img {
    width: 100%;
    height: auto; /* this is default */
}

Answer 2

您可以尝试对vmin值进行尝试，以使表不会变得比窗口大（如果我正确理解），然后将表布局重置为固定值，因此不允许表变得更宽比设置的宽度大。最后，如果图像确实很大且是平方的，则应该使用max-width。

table {
  table-layout:fixed;
  width:90vmin;
}
img {
  max-width:100%;
}

<table align="center">
<tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr>
<tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr><tr>
  <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
       <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
     <td>
    <img  src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
     </td>
</tr>

</table>

如果边框塌陷，那么您也可以

body,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100vmin;
}

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

<table align="center">
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
    <td>
      <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
    </td>
  </tr>

</table>

可能有用的资源

• https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

• https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

• Image inside div has extra space below the image