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

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