Html 动态比例高/宽div中的CSS图像位置中间

需要解决这个小任务：

将图像垂直和水平居中放置在DIV中

DIV高度必须与宽度成比例

DIV宽度是可伸缩的（例如，父DIV的50%）

图像宽度和高度=自动（如果其宽度或高度>div宽度或高度，则必须填充div；如果其

我知道怎么做2和3

HTML:

但是如何在这个DIV中居中显示图像呢？ 有很多方法可以使1个任务具有非比例和不可拉伸的div。 但我不知道如何把这一切都安排在一个充满任务的屋子里

你能帮忙吗？HTML和CSS可以是任意的。

您是否尝试过：

    .container img {
        vertical-align : middle
    } 

?？它将垂直对齐您的图像。

尝试以下操作：

<style>
            .container
            {
                    width   :100%;
                    height  :100%;
                    display :table;
            }
            .child
            {
                    vertical-align :middle;
                    display        :table-cell;
            }
            .child img
            {
                    display :block;
                    width   :50%;
                    margin  :0 auto;
            }
    </style>

    <div class="container">
            <div class="child">
                    <img src="img.png"/>
            </div>
    </div>

.集装箱
{
宽度：100%；
身高：100%；
显示：表格；
}
小孩
{
垂直对齐：中间对齐；
显示：表格单元格；
}
.儿童img
{
显示：块；
宽度：50%；
保证金：0自动；
}
我自己解决了。请点击此处：

HTML:

回答错了。这种情况比您想象的要困难一些。容器宽度100%和高度100%不会给出纵横比为1:1的比例平方比，它必须拉伸（如我的示例中）.你的问题不清楚..你要求使图像垂直和水平居中，你希望它被拉伸…这怎么可能？可能是可能的。我不知道。如果可以使div像一个拉伸的正方形，那么为什么不可能在该div中设置中心图像？拉伸图像如何在垂直和水平方向居中？要使其拉伸，请将图像css设置为宽度：100%，高度：100%，显示：块…试试这个。。。。
    .container img {
        vertical-align : middle
    } 

<style>
            .container
            {
                    width   :100%;
                    height  :100%;
                    display :table;
            }
            .child
            {
                    vertical-align :middle;
                    display        :table-cell;
            }
            .child img
            {
                    display :block;
                    width   :50%;
                    margin  :0 auto;
            }
    </style>

    <div class="container">
            <div class="child">
                    <img src="img.png"/>
            </div>
    </div>

<div class="width-50">
    <div class="parent">
        <div class="aspect"></div>
        <div class="block">
            <div class="tbl">
                <div class="tbl-cell">
                    <img src="img.jpg"/>
                </div>
            </div>
        </div>
    </div>
</div>

.width-50{
    width:50%
}

.parent{
    position: relative;
}

.aspect
{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    box-sizing: border-box;
}

.block{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: block;
}

.tbl{
    display: table;
    width: 100%;
    height: 100%;
    position: absolute;
}

.tbl-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #aaa;
}

.tbl-cell img{
    max-width:100%;
    max-height:100%;
}