如何实现同级图片和div，宽度固定高度自适应，div高度等于图片高度？

Question

如果是一张图片，可以用js控制，但通常这种场景是列表，也就是多张图片，如下图所示：

图中，右边是示例页面，左边是轮廓图。图1和图2，宽度固定，高度自适应。现在期待的效果是a元素和b元素，可以分别定位到图片顶端和底部。这样的话，js控制效率低而且实现过于复杂。

请问只用css的话，最佳实现方案。

Answer 1

ab绝对定位与div，也不用js啊

<div style="display:flex">
    <div>
        <img src="https://t11.baidu.com/it/u=3035694178,428430190&fm=76">
    </div>
    <div style="position: relative;flex-grow: 1;">
        <h1 style="margin:0">ddddd</h1>
        <p style="position:absolute;bottom: 0;margin:0;
            right: 0;">ssss</p>
    </div>
</div>