纯HTML / CSS图像在表格中自动调整动态文本内容

Question

我正在寻找一个纯HTML / CSS（无脚本）解决方案，用于包含两个图像的表，这些图像需要根据其他单元格中的文本内容进行自动调整。

所需的4x2表配置为follows：

第一列包含应保持原始宽度：高度比的图像。第一行image应自动调整，第三列的高度为100％。第二行image应自动调整，第一行图像的宽度为100％。

第二列具有固定的1em宽度：

<td rowspan="2" style="width: 0em; padding-left: 1em;"></td>

两行中的第三列包含未知大小的多行无包装文本：

<td style="width: 0em; white-space: nowrap;">...<br>...</td>

最后一列占据桌子右侧的剩余空间：

<td rowspan="2" style="width: 100%;"></td>

如何对第一列进行编码以强制同时对两张图片进行自动调整？

NBA和NHL徽标/图像是其各自所有者的注册商标和财产。

Answer 1

这是你做的。

所以在第一个广场上你有一个NBA标志（让我们称之为1,1）。在1,1的内部，我们可以放置一个显示特定图像的图像标签。从那时起，我们将高度设置为它所在的父div的100％。然后我们将其宽度设置为auto。

这看起来像这样：

.NBAparentDiv {
     width: x; /*Width that matches NBAlogo aspect ratio*/
     height: y; /*Height that matches NBAlogo aspect ratio*/
}

.NBAparentDiv img {
     height: 100%;
     width: auto;
}

然后对于第二个我们可以做反过来：

.NHLparentDiv {
     width: x; /*Width that matches !!NBAlogo!! aspect ratio*/
     height: y; /*Height that matches !!NBAlogo!! aspect ratio*/
}

.NHLparentDiv img {
     height: auto;
     width: 100%;
}

这应该是你想要的第一列。