gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:55:59 25 4
gpt4 key购买 nike

<分区>

我正在尝试制作一个 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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com