我正在寻找一个纯 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)。
最佳答案
这就是你要做的。
所以在第一个方 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%;
}
这应该可以满足您对第一列的要求。
关于html - 具有动态文本内容的表格中的纯 HTML/CSS 图像自动调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48444359/