时间戳

首页 > 解决方案 > 如何让图像在表格单元格内垂直缩放？

html - 如何让图像在表格单元格内垂直缩放？

问题描述

我正在使用旧的表格布局，并且遇到了表格单元格内图像缩放的布局问题。

以下代码在页面中时，会随着浏览器窗口宽度的变化而上下缩放图像。但是，如果您上下更改窗口的浏览器高度，它不会缩放图像，它似乎被锁定到图像的宽度。因此，如果窗口很宽，则绿色部分会从窗口底部消失

我怎样才能使它也可以根据高度进行缩放？这意味着随着浏览器的高度变小，红色部分和绿色部分应该将图像压缩到很小。

这个问题有 javascript 解决方案，但我想用 HTML/CSS 来解决。

      <style>
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }

    table {
      height: 100vh;
      table-layout: fixed;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <table style="width:100%">
    <col width="100">
    <col width="100%">
    <col width="100">
    <tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
    <tr>
      <td> </td>
      <td>
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
      </td>
      <td> </td>
    </tr>
    <tr class="green" style="height:200px;">
      <td> </td> <td> </td> <td> </td>
    </tr>
  </table>

</body>

所以这是压缩的宽度，图像缩小了...... 在此处输入图像描述

在这里，宽度更宽，但高度相同，但图像现在采用更多垂直高度 在此处输入图像描述

标签： htmlcss

解决方案

Like this?

https://jsfiddle.net/xhc6ovzL/

 <table style="width:100%">
<col width="100">
<col width="100%">
<col width="100">
<tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
<tr>

  <td colspan="3">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
  </td>
  <td> </td>
</tr>
<tr class="green" style="height:200px;">
  <td> </td> <td> </td> <td> </td>
</tr>

推荐阅读