html - flex 图像行在没有包装器的情况下收缩

Question

我如何制作高度为 100px 的 flex 1 行；无包装；图像缩小；没有包装任何 img 标签；允许使用对象拟合；图像可以是任意大小；如果图像高度小于 100 像素，则不按高度分层（参见最后一张图片）

<div class="row">
       <img src="https://res.cloudinary.com/1.jpg" >
       <img src="https://res.cloudinary.com/2.jpg" >
       <img src="https://res.cloudinary.com/3.jpg" >
</div>

.row{
    height: 100px;
    width: 500px;
    display: flex;
}
.row img {
    object-fit: cover;
    flex-shrink: 1;
}

期望的结果：

如果更多图片

标签： htmlcssflexbox