CSS如何讓多個圖片無縫水平排列，高度相同

以三張圖片爲例

html

<div class="img_container">
    <div><img src="../img/cake1.jpg" alt=""></div>
    <div><img src="../img/cake2.JPG" alt=""></div>
    <div><img src="../img/cake3.png" alt=""></div>
</div>

圖片徹底填充高度：可能會失真

css

.img_container{
    display:flex;
}
.img_container>div>img{
    width: 100%;
    height: 200px;
}

效果：

圖片不失真，可是可能有一部分被截掉

css

.img_container{
    display:flex;
    height:200px;
    overflow:hidden;
}
.img_container>div>img{
    width: 100%;
}

效果：