CSS实现：让图片与动态高度的左侧文本等高

实现思路 #

用CSS Grid让左右列高度强制对齐，通过图片容器的溢出隐藏+object-fit: cover，让图片完全贴合左侧动态文本的高度，同时保持比例裁剪多余部分。

代码示例 #

HTML

<div class="layout-container">
  <div class="text-area">
    <!-- 这里是动态高度的文本，可任意增减内容测试 -->
    动态文本内容示例，行数变化会自动带动右侧图片高度适配。
    动态文本内容示例，行数变化会自动带动右侧图片高度适配。
    动态文本内容示例，行数变化会自动带动右侧图片高度适配。
  </div>
  <div class="image-container">
    <img src="你的图片路径" alt="图片描述">
  </div>
</div>

CSS

.layout-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右各占50%屏幕宽度 */
  gap: 1.5rem; /* 可选：调整两列间距 */
}

.text-area {
  /* 文本样式按需自定义 */
  padding: 1rem;
  line-height: 1.6;
}

.image-container {
  height: 100%; /* 继承容器高度，即左侧文本的高度 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪适配容器 */
}

核心要点 #

• Grid布局强制左右列高度一致，文本高度变化时，图片容器会自动同步高度。
• 图片容器的height:100%和overflow:hidden是实现裁剪的关键，确保图片不会超出文本高度。
• object-fit: cover避免图片拉伸变形，只裁剪超出容器的区域，保留图片核心内容。

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