html - 设置 flex 行高以适合子 img 大小-6ren

html - 设置 flex 行高以适合子 img 大小

转载作者：行者123 更新时间：2023-11-28 14:55:59

<分区>

我正在尝试制作一个 flexbox 行以使其高度与子 img 相匹配，该高度由其宽度(来自 CSS)和它的比例(来自文件)设置。是否有纯 CSS 方法来实现此行为？

.row {
  width: 50%; 
  height: auto; /* does not work */
  display: flex;
  flex-direction: row;
}

.row, .row > * {
  background: rgba(200, 0, 0, 0.1);
}

.row > .text {
  white-space: normal;
  flex-grow: 2; /* width: 100%  also works */
}

.row > img:last-child {
  width: 40%;
  height: auto;
  border: 0px;
}

<div class="row">
  <div class="text">Some text content, occupies all available space.<br/>Image to the right should have 4x3 ratio</div>
  <img src="https://www.christart.com/IMAGES-art9ab/clipart/5233/blown-leaves-background.jpg"><!-- a random 4x3 image from Internet -->
</div>