如何使id为thisone的div包裹图片并满足指定元素定位要求？

原始代码 #

<table style="width: 100%; table-layout: fixed; margin-top: 100px;">
    <tr>
        <td align="center">
            bla
        </td>

        <td align="center">

            <div id="thisone" style="display: flex; position: relative; background-color: blue;">
                
                <div style="position: absolute; height: 20px; width: 100%; margin-top: -30px; display: flex; flex-direction: row; justify-content: space-between; background-color: red;">
                    up
                </div>


                <div style="position: absolute; height: 100%; width: 20px; margin-left: -30px; display: flex; flex-direction: column; justify-content: space-between; background-color: red;">
                    left
                </div>

                <img src="https://i.imgur.com/1T1iFeN.jpg" style="max-width: 100%; max-height: 100vh;">
            </div>                  
        </td>

        <td align="center">
            bla
        </td>           
    </tr>
</table>

需求 #

让id为thisone的div包裹住图片，同时满足：

• 包含“up”的div位于图片上方，宽度与图片一致
• 包含“left”的div位于图片左侧，高度与图片一致
  也可采用relative定位的替代方案。

方案一：修复原代码实现需求 #

原问题核心是容器未自适应图片尺寸，且定位元素的偏移方式错误。修改后代码如下：

<table style="width: 100%; table-layout: fixed; margin-top: 100px;">
    <tr>
        <td align="center">
            bla
        </td>
        <td align="center">
            <div id="thisone" style="display: inline-block; position: relative; background-color: blue;">
                <div style="position: absolute; height: 20px; width: 100%; top: -20px; display: flex; flex-direction: row; justify-content: space-between; background-color: red;">
                    up
                </div>
                <div style="position: absolute; height: 100%; width: 20px; left: -20px; display: flex; flex-direction: column; justify-content: space-between; background-color: red;">
                    left
                </div>
                <img src="https://i.imgur.com/1T1iFeN.jpg" style="max-width: 100%; max-height: 100vh;">
            </div>                  
        </td>
        <td align="center">
            bla
        </td>           
    </tr>
</table>

修改要点 #

1. 给#thisone设置display: inline-block，让容器根据图片实际尺寸自动调整，从而包裹住图片；保留position: relative作为内部绝对定位的参考。
2. 调整“up”元素：去掉margin-top: -30px，改用top: -20px（等于自身高度），使其刚好位于图片上方，width: 100%自动匹配图片宽度。
3. 调整“left”元素：去掉margin-left: -30px，改用left: -20px（等于自身宽度），height: 100%自动匹配图片高度，刚好位于图片左侧。

方案二：CSS Grid替代方案（无需绝对定位） #

用Grid布局更直观地实现元素定位，容器自然包裹所有内容：

<table style="width: 100%; table-layout: fixed; margin-top: 100px;">
    <tr>
        <td align="center">
            bla
        </td>
        <td align="center">
            <div id="thisone" style="display: inline-grid; grid-template-areas: 
                'up up'
                'left img';
                grid-template-columns: 20px auto;
                grid-template-rows: 20px auto;
                background-color: blue;">
                <div style="grid-area: up; background-color: red; display: flex; justify-content: space-between;">
                    up
                </div>
                <div style="grid-area: left; background-color: red; display: flex; flex-direction: column; justify-content: space-between;">
                    left
                </div>
                <img src="https://i.imgur.com/1T1iFeN.jpg" style="grid-area: img; max-width: 100%; max-height: 100vh;">
            </div>                  
        </td>
        <td align="center">
            bla
        </td>           
    </tr>
</table>

方案说明 #

• 通过grid-template-areas直接定义布局：“up”占据顶部整行，“left”占据左侧第一列，图片占据右侧第二列。
• 无需绝对定位，元素自动匹配对应区域尺寸：“up”宽度与图片一致，“left”高度与图片一致，容器自动包裹所有元素。

内容的提问来源于stack exchange，提问作者user19559647