如何让含responsive image与文本的并排Div等高并截断文本

需要实现两个各占50%宽度的并排容器，左侧是响应式图片，右侧是文本，满足以下要求：

• 图片保持原有宽高比
• 文本字号固定不变
• 两个容器高度大致一致
• 文本内容过多时自动截断（可用text-overflow:ellipsis）

同时想确认：是否能实现上述效果？如何让右侧文本容器高度不超过左侧图片容器？

以下是当前使用的简化代码：

.wrapper {
  display: flex;
  width: 100%;
}

.image-wrapper {
  flex: 1;
  margin-right: 60px;
}

.intro-wrapper {
  flex: 1;
  font-size: 16px;
}

img {
  height: auto;
  max-width: 100%;
}

<div class="wrapper">
  <div class="image-wrapper">
    <img src="https://picsum.photos/300/170" alt="">
  </div>
  <div class="intro-wrapper">
    long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here.
  </div>
</div>

完全可以实现，核心是让右侧文本容器继承左侧图片容器的高度，同时通过CSS限制文本显示区域并实现截断。具体调整如下：

关键修改点 #

• 左侧图片容器加flex-shrink: 0防止被压缩，用aspect-ratio匹配图片原始宽高比（兼容旧浏览器可改用内边距模拟）
• 右侧文本容器设overflow: hidden，限制高度不超过左侧；通过Flex布局让文本垂直排列，再给文本块加多行截断样式
• 用gap替换margin-right，更符合Flex布局规范

修改后的CSS #

.wrapper {
  display: flex;
  width: 100%;
  gap: 60px; /* 替换原margin-right，控制两个容器的间距 */
}

.image-wrapper {
  flex: 1;
  flex-shrink: 0; /* 避免图片容器被文本挤压变形 */
  aspect-ratio: 300/170; /* 匹配示例图片的宽高比，按需调整 */
}

.intro-wrapper {
  flex: 1;
  font-size: 16px; /* 固定字号不变 */
  overflow: hidden; /* 强制容器高度不超过左侧图片容器 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 可选：让文本垂直居中，不需要可删除 */
}

.intro-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* 最多显示5行，按需调整行数 */
  -webkit-box-orient: vertical;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填充容器且保持宽高比，可选contain */
}

修改后的HTML #

<div class="wrapper">
  <div class="image-wrapper">
    <img src="https://picsum.photos/300/170" alt="示例图片">
  </div>
  <div class="intro-wrapper">
    <div class="intro-text">
      long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here. long text here.
    </div>
  </div>
</div>

细节说明 #

1. 图片宽高比兼容方案：如果要支持不认识aspect-ratio的旧浏览器，把.image-wrapper改成：

   .image-wrapper {
     flex: 1;
     flex-shrink: 0;
     position: relative;
     padding-top: 56.67%; /* 170/300*100%，对应图片宽高比 */
   }
   img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   

2. 单行文本截断：如果只需要单行截断，把.intro-text的样式改成：

   .intro-text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   

3. 严格50%宽度：如果需要两个容器严格各占50%（扣除间隙），把.wrapper的gap去掉，给两个容器设置：

   .image-wrapper, .intro-wrapper {
     flex-basis: calc(50% - 30px); /* 30px是间隙的一半 */
   }
   

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