Html 如何使用CSS调整图像大小以适应其容器

我想使div具有恒定的宽度和高度，其中包含大小未知的子图像

大概是这样的：

我得到的最接近的是

max height:inherit；最大宽度：继承

，但它会更改纵横比

.parent{
边框：1px实心；
宽度：40vh；
高度：40vh；
溢出：隐藏；
显示器：flex；
}
img{
最大宽度：继承；
最大高度：继承；
身高：继承；
宽度：继承；
}

---

您需要使用

对象匹配：覆盖
img
或
视频的css属性应调整大小以适合其容器

运行下面的代码段


.parent{
边框：1px实心；
宽度：20vh；
高度：20vh；
溢出：隐藏；
显示器：flex；
}
img{
最大宽度：继承；
最大高度：继承；
身高：继承；
宽度：继承；
对象匹配：覆盖；
}

如果不使用，您可能希望尝试
img{width:100%}
而不是同时使用
max-
值。使用此选项（以及CSS默认值
height:auto
），图像将拉伸以填充可用的宽度空间，并拉伸高度与比率。但是如果没有你的代码，这就有点像猜谜游戏……你应该使用
对象适合度：contain
作为你的
你可以尝试使用
方向
媒体查询来设置不同的值，如果
.parent
从
flex:1
获得它的大小，而不是
宽度
和
高度
？