如何让图片自适应文本高度，不撑高父div容器？

你可以通过调整Flex布局的对齐方式和图片样式，让文本内容决定容器高度，图片自适应该高度且保持比例：

• 移除容器上的align-items-center类，这个类会强制容器高度适配图片，而非文本内容；
• 给图片所在的flex-shrink-0容器添加Bootstrap的h-100类，让它和右侧文本容器高度一致；
• 给图片设置height: 100%; width: auto; object-fit: contain;，确保图片自适应容器高度、保持原有比例且不会变形，同时尽可能填满可用空间。

修改后的完整代码：

<div class="mycard border border-dark m-3 p-3 d-flex" style="width: 33%;">
  <div class="flex-shrink-0 h-100">
    <img src="https://s3.amazonaws.com/cdn.sidsavage.com/images/prods/popup/P8889.jpg" style="height: 100%; width: auto; object-fit: contain;">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

如果需要图片完全填充高度（允许裁剪部分区域），可以把object-fit: contain;改成object-fit: cover;，根据需求选择即可。

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