求助，如何通过css让文字不超过图片的宽度？

Question

描述: 如何不用js情况下，让图片和文字对齐。
结构:

<div>
    <img src=1 title="或许很短，或许很长，所以要加入max-width和min-width">
    <p>文字，或许很长很长很长或许很长很长很长或许很长很长..</p>
</div>

目的让文字和img同宽度，img不能写死宽度，需要max-width: 60%范围内自由伸展。

已知问题:

1. div 设置max-width 60%，img虽然和文字同长度，但是小图片会和文字无法对齐，图片短，文字长。
2. div 设置max-width 60%, img 设置width: 100%，对于小图片会被拉伸。也是不行

允许变化：

1. html结构和css可变
2. 可获取每张将要显示图的长宽尺寸

唯一：不想使用JS,因为涉及数据量大需要列表循环渲染，然后再每一张计算实际宽度，导致页面结构变化或延迟问题。

想要的结果图样：

各位大佬求助！！！

Answer 1

<div style="display: inline-block;max-width: 60%;position: relative;">
        <img src="1.png" style="max-width: 100%;">
        <p style="position: absolute; word-break: break-all;">
          11111111111111111111111111111111111111111111111111111111111111111111111111
        </p>
      </div>