自适应高度div内的垂直定心元件和隐藏溢出部件

Question

我有一个容器div，其中包含一个固定比例的元素（为简单起见，图片也可以是视频）。从现在开始，我将使用container识别带有容器的element div及其中的元素。

要求

这是我想要获得的（可能只使用 CSS ，没有JS）

1. container必须是窗口宽度的100％和窗口高度的50％（请参阅要求n.5中的高度异常）
2. element必须填充container宽度的100％并保持其比例（不必因窗口调整大小而变形）
3. element必须在container
内垂直和水平居中
4. 当element身高高于container身高时，element上方和下方container的多余部分必须隐藏
5. 当element身高低于container身高时，容器身高必须符合element身高

目标是基本上创建与background-size:cover对图像相同的内容，但应用于具有固定比例的通用元素。



我的（部分）解决方案

这是我的实际代码。我已经设法达到要求n.1,2,4（见fiddle）但我仍然在努力寻找3和5的解决方案。在我发布的小提琴中评论overflow:hidden属性并设置边框到容器以更好地显示我的目标。

.container {
    margin-top:100px;
    border:2px solid red;
    height:50vh;
    display:block;
    /*overflow:hidden;*/
    position:relative;
}

.container>* {
    position:absolute;
    top:-25vh;
    display:block;
    width:100%;
    z-index:-1;
}

有什么想法吗？