使用object-fit: cover的img仍影响父元素高度，需以文本定容器高度

我懂你的困扰——想用<img>标签实现背景图那样的自适应效果，让父容器高度完全由旁边的文本内容决定，但又没法改成背景图（毕竟是富文本编辑器插入的）。

核心问题在于<img>自带的固有尺寸，哪怕加了object-fit: cover，它还是会默认占据自身空间，进而拉高父元素。我们可以通过绝对定位让<img>脱离文档流，这样它就不会再影响容器高度，同时让它填满由文本区域撑起来的父容器高度。

修改后的代码方案 #

CSS 部分：

.container { 
  display: flex; 
  flex-direction: row; 
  padding: 20px; 
  background: lightblue; 
  width: 80%;
  /* flex默认属性，让子元素自动拉伸到容器高度 */
  align-items: stretch;
}
.img-item { 
  flex-shrink: 2;
  /* 关键：设置相对定位，作为img的定位基准 */
  position: relative;
  /* 给图片容器设置基础宽度，避免过度压缩 */
  width: 30%;
}
.img-item img { 
  /* 绝对定位，脱离文档流，不再影响父元素高度计算 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保持图片比例并填满容器，超出部分裁剪 */
  object-fit: cover;
}
.text-item { 
  flex-shrink: 3; 
  padding: 20px;
}

HTML 部分（无需改动，保留原结构）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1> Heading one </h1>
<p>Hello world. You're the best.</p>
</div>
</div>
</body>
</html>

为什么这样能解决问题？ #

1. .img-item设置position: relative：让它成为内部<img>绝对定位的参考容器，确保图片不会跑出这个区域。
2. <img>设置position: absolute：彻底脱离正常文档流，它的尺寸不再参与父元素.img-item的高度计算，父元素高度完全由flex容器里的文本区域决定。
3. align-items: stretch：flex容器的默认属性，会把.img-item自动拉伸到和.text-item相同的高度——也就是文本内容撑起来的高度。
4. object-fit: cover：保证图片在填满容器的同时，不会变形，超出容器的部分会被自动裁剪，完美模拟背景图的background-size: cover效果。

这样调整后，你就能保留<img>标签的同时，实现完全由文本决定容器高度、图片自适应填充的效果啦。

内容的提问来源于stack exchange，提问作者E-video