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

我有一个容器

div

，其中包含一个固定比例的元素（为了简单起见，可以是一个图像，但也可以是一个视频）。从现在开始，我将用container标识

容器

div，用

元素

标识其中的元素

要求

下面是我想要得到的（可能只使用CSS，不使用JS）

容器

必须为窗户宽度的100%和窗户高度的50%（参见要求n.5中的高度例外）

元素

必须填满容器宽度的100%，并保持其比例（不必因窗口大小而变形）

元素

必须在容器内垂直和水平居中

当

元素

高度高于

容器

高度时，必须隐藏

元素

容器上方和下方的多余部分

当

元素

高度低于

容器

高度时，容器高度必须适合

元素

高度

我们的目标是创建与

背景大小：cover

对图像所做的相同的东西，但应用于具有固定比例的通用元素。

我的（部分）解决方案

这是我的实际代码。我已经成功地实现了n.1、2、4（请参阅）的要求，但我仍在努力寻找3和5的解决方案。在发布的fiddle中，我已经注释了

overflow:hidden

属性，并为container设置了一个边框，以更好地显示我的目标

.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;
}

---

有什么想法吗？

使用

最大宽度：100%怎么样和<代码>最大高度：100%？@jackweinbender你是指
元素
样式吗？是的。不过，仔细想想，我想你会想保持
width:100%仅包括
最小高度：100%。显然，这并不能解决垂直居中的问题，但这只是一个开始。@jackweinbender我曾尝试将
min height:100%
添加到元素中，但没有成功。结果是：谢谢。@Giorgio这是一个非常简单的解决方案，使用jQuery：当然，您必须在其中加入一些调整大小的计算，但这就是它的要点。