Html 将超大图像放入父容器中

我需要将图像放入父容器中。图像大于父对象的大小，需要缩放父对象的高度并隐藏所有过大的内容。父对象的宽度没有明确定义，只有使用Calc计算的高度。不希望使用background:url，因为图像将使用区域贴图

.container
{
height: calc(100vh - 56px);
overflow: hidden;
}

.container img
{
height: auto;
max-height: 100%
}

HTML

以下是解决方案

.container 
{ 
height: calc(100vh - 56px); 
overflow: hidden; 
position: relative; 
margin: 0; 
} 

.container img 
{ 
display: block; 
position: absolute; 
top: 50%; 
left: 50%;
max-height: 100%; 
transform: translate(-50%, -50%); 
}

---

更好的选择，使其对象适合：以及封面

.container
{
高度：计算（100vh-56px）；
溢出：隐藏；
边框：5px纯红；
位置：相对位置；
}
.集装箱img
{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
身高：100%；
宽度：100%；
对象匹配：覆盖；
转换：翻译（-50%，-50%）；
}

上面的代码有什么问题？在我看来很好。不，图像宽度。代码中没有任何内容表明容器有必要的宽度。您可能需要使用完整的代码更新问题，以显示您试图修复的更多场景。在此解决方案中，您将拉伸图像。不，为什么？图像完全保留自己的大小您的问题是“需要将其缩放到父容器的高度并隐藏所有过大的内容”-您的代码不会将图像的高度缩放到与父容器相同的大小。

.container 
{ 
height: calc(100vh - 56px); 
overflow: hidden; 
position: relative; 
margin: 0; 
} 

.container img 
{ 
display: block; 
position: absolute; 
top: 50%; 
left: 50%;
max-height: 100%; 
transform: translate(-50%, -50%); 
}