html - 具有动态文本内容的表格中的纯 HTML/CSS 图像自动调整大小

Question

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

所需的 4x2 表配置为 follows :

第一列包含应保持其原始宽高比的图像。第一行 image应该自动调整大小，第 3 列的高度为 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 Logo /图像是其各自所有者的注册商标和属性(property)。

Answer 1

这就是你要做的。

所以在第一个方 block 中(我们称之为 1,1)有一个 NBA 标志。在 1,1 内部，我们可以放置一个显示该特定图像的图像标签。从那时起，我们将高度设置为它所在的父 div 的 100%。然后我们将其宽度设置为自动。

看起来像这样:

.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%;
}

这应该可以满足您对第一列的要求。