Html 收缩图像以适合柔性柱

我有一个图像，我想在flexbox列布局中缩小。我读了很多相关的文章，但我还是搞不懂

我希望右栏的高度始终与左栏相同，右栏中的图像填充文本未占用的剩余空间的高度。有什么想法吗？谢谢大家!

我希望它看起来像这样：

代码笔在这里：

这是我的HTML：

<div class="block-one">
    <div class="block-one-left">
        <img src="https://via.placeholder.com/300x400" alt="">
    </div>
    <div class="block-one-right">
        <div class="block-one-right-top">
           <img src="https://via.placeholder.com/300x400?text=Shrink+Me!" alt="">
        </div>
        <div class="block-one-right-bottom">
            <p>Lorem ipsum dolor sit amet, consectetuer diiscing elit, sed diam nonummy nibh dolor it euismod tincidunt ut laoreet dolore.</p>
        </div>
    </div>
</div>

---

您可以使用一小段javascript来计算左侧img高度减去文本高度的差值，并将右侧图像高度设置为该差值。只需将这4行javascript放在一个

-标记中，就在结束body标记之前

工作示例：

var max_height=document.querySelector（'.block one left'）.clientHeight；
var text_height=document.querySelector（'.block one right-bottom'）.clientHeight；
var shrink\u height=最大高度-文本高度；
document.querySelector（“.block one right top”）.style.height=收缩高度+px
*{
保证金：0；
填充：0；
框大小：边框框；
}
1号楼{
显示器：flex；
宽度：600px；
余量：0 50px 100px 50px；
填充：25px；
背景：#9ac1e4；
}
1号楼左转{
高度：300px；
右边距：25px；
}
.左一号街区{
身高：100%；
}
1号楼右转{
宽度：225px；
}
.阻塞一个右上img{
身高：100%；
}
.右下角1号楼{
填充顶部：25px；
}

这是一个很好的例子，它是一个很好的例子

文本是否仍应在蓝色框中？哪里右下角？居中？是的，仍在右侧图像下方的蓝色框中。查看带有图片的更新帖子您不需要响应行为吗？如果您固定了图像的高度，并尝试缩小浏览器的宽度，您的图像将失真，您的容器宽度是否固定？i、 一号楼有固定的宽度吗？如果是的话，那么你只需要在第二列有一个固定高度的图像，可能是60%的高度是的，我希望它是响应。任何东西都没有固定的宽度或高度。谢谢！所以我想用纯flexbox是没有办法做到这一点的？不，因为flexbox会像内容所需要的那样变大。在你的情况下，最好有一个“收缩箱”。。。但是如果这回答了你的问题，你应该将答案标记为已接受。。。
.block-one {
    width: 50%;
    padding: 50px;
    background: #9ac1e4;
    margin: 0 50px 100px 50px;
    display: flex;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
}

.block-one-left {
    width: 40%;
    padding-right: 50px;
}

.block-one-left img {
    width: 100%;
}

.block-one-right {
    width: 60%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.block-one-right-top {
    height: 100%;
    flex: 1;
}

.block-one-right-top img {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    min-width: 0;
    width: auto;
    object-fit: contain;
}