Question

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

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

我如何才能使它也根据高度缩放？意思是红色部分和绿色部分应压缩图像，直到浏览器高度变小为止。

有针对此问题的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>

所以这是压缩的宽度，图像缩小了...

在这里，宽度更宽，但是高度相同，但是图像现在的垂直高度更高

Answer 1

也许这些编辑很有用，一起玩吧。

    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }

    table {
      height: 100vh;
      table-layout: fixed;
    }

    img {
      width: 100%;
      height: 100%;
    }
    
    .image{
position: relative;
padding-top: 30vh;

    }
    
    .image img{
      	position: absolute;
	top: 0;
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	right: 0;
	margin: auto;
	left: 0;
    }

 <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 class="image">
        <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>

Answer 2

我为您的图像设置了max-height，以在所有设备中显示底部的绿色部分。因此，您可以调整它的大小。您可以根据需要调整max-height。我希望此解决方案可以为您提供帮助。

 .red {
     background-color: red;
 }
 
 .green {
     background-color: green;
 }
 
 table {
     height: 100vh;
     table-layout: fixed;
 }
 
 img {
     width: 100%;
     height: 100%;
     max-height: 450px;
     object-fit: contain;
 }

<table style="width:100%">
    <colgroup>
        <col width="100">
            <col width="100%">
                <col width="100">
    </colgroup>
    <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>

Answer 3

您的<col>宽度为100px，100％，100px，即200px以上。中间列是未指定的宽度，因此它将占用左右固定列不占用的任何空间。
第一行的高度为100px，最后一行的高度为200px。中排的高度占据了剩余的垂直空间。 Special pseudo-classes用于定位td（而不是tr）。 tr似乎是修改高度的逻辑选择，但不是这样，因为html的性质是面向内容的，因此witdh和高度为90％td和10％table。
```
 tr:first-of-type td:first-of-type

 tr:last-of-type td:last-of-type 
```
<html>和<body>设置为100％x 100％position:relative，因此分配给<table>的{{1}}正好位于视口内。
中间的行用position:absolute展开，图像现在是背景图像。稍作更改，图像即可扩展并填充整个行，而不会溢出或将其他行进一步移位。将{{1}中的colspan='3'设置为background-size。

演示

cover

contain

Answer 4

喜欢吗？

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>

如何使图像在表格单元格内垂直缩放？

4 个答案:

演示