Html 在flexbox中进行拟合时，使图像缩放以保持其纵横比

考虑到以下准则：

*{
框大小：边框框；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
宽度：400px；
高度：200px；
填充：10px；
背景：红色；
}
.盒子{
弹性：1；
}
.box img{
对象匹配：包含；
}

乱数假文

这个

.box

也应该是

显示：flex

，这样img就可以在

.box

中“增长”

*{
框大小：边框框；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
宽度：400px；
高度：200px；
填充：10px；
背景：红色；
}
.盒子{
显示器：flex；
弹性：1；
溢出：隐藏；
}
.box img{
对象匹配：包含；
}

乱数假文
溢出：隐藏的
也是魔法的一部分，因为它可以防止
.box
被
img
缩放，不是吗？是的。而
display:flex
有助于图像保持比例，使其不会被夹在框内。