Question

需要解决这个小任务：

在DIV中垂直和水平居中图像。
DIV高度必须与宽度成正比。
DIV宽度是可伸缩的（例如父div的50％）。
图片宽度和高度=自动（如果宽度或高度> div，则必须填充div而不是div宽度或高度，如果＆lt; div尺寸，则必须填充主尺寸，并保持比例）。

我知道如何制作2和3。

HTML：

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

CSS：

.container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

但是如何在这个DIV中居中间IMAGE？使用非比例和非可伸展div可以通过很多方法完成1个任务。但是我不知道如何在完整的任务中完成所有工作。

Answer 1

你有没有尝试过：

    .container img {
        vertical-align : middle
    }

？它会垂直对齐你的图像。

Answer 2

试试这个：

<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>

Answer 3

我自己解决了。点击此处：http://jsfiddle.net/42trk8ux/17/

HTML：

<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>

CSS：

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

CSS Image pos中间动态按比例高度/宽度div

3 个答案: