CSS如何实现div内右侧图片尺寸自适应左侧文本高度

实现方案 #

你只需要调整flex布局的对齐规则，让容器高度由左侧文本撑开，右侧图片自动适配容器高度即可，修改后的代码如下：

调整后的CSS代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: brown;
  min-height: 100vh;
  padding: 20px;
}
.content_box {
  display: flex;
  flex-direction: row;
  /* 核心规则：让所有flex子项高度撑满容器，容器高度由最高的子项（左侧文本）决定 */
  align-items: stretch;
  background-color: brown;
  padding: 1em;
  border-radius: 0.5rem;
  width: fit-content;
}
.content_box .left {
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
}
.content_box .credentials {
  color: beige;
}
.content_box .right {
  flex-shrink: 0;
  display: flex;
}
.content_box .right img {
  /* 核心规则：图片高度撑满父容器，和左侧文本高度完全同步 */
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 4px;
}

调整后的HTML代码

<div class='content_box'>
  <div class='left'>
    <div class='credentials'>Username</div>
    <p>Posted message<br>可以自行添加多行文本测试适配效果<br>第三行<br>第四行</p>
    <div class='credentials'>01/01/2021</div>
  </div>
  <div class='right'>
    <img src="替换为你的图片本地地址" alt="展示图">
  </div>
</div>

适配逻辑说明 #

• flex容器的align-items: stretch属性会让所有子项高度对齐到最高子项的高度，也就是完全由左侧文本的行数决定整个容器的高度，文本行数越多容器越高
• 右侧图片设置height: 100%会自动撑满右侧容器的高度，不管原图是3030还是10241024，都会严格跟随左侧文本高度调整尺寸，object-fit: cover保证图片不会拉伸变形
• 如果需要固定图片宽度，只需要把img的width: auto修改为固定数值比如width: 120px即可，高度依然会自动适配左侧文本高度

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