CSS：100％高度绝对div内的垂直中心响应图像[重复]答案

【问题标题】：CSS: vertical center responsive image within 100% height absolute div [duplicate]CSS：100％高度绝对div内的垂直中心响应图像[重复]
【发布时间】：2014-01-02 19:56:54
【问题描述】：

我想在 div 中水平垂直居中图像（根据屏幕大小改变尺寸）。该 div 是绝对定位的，高度为 100%。在该 div 下，放置了另一个 div。

我发了visual example

    <body>
    <div id="wrapper">
    <div id="div1">
        <div id="center">
            <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg">
        </div>
    </div>
    <div id="div2">
    You can't see this without scrolling
    </div>
</div>
</body>

我想在红色 div 中垂直居中测试图像。

谢谢！

【问题讨论】：

我的回答：stackoverflow.com/a/21919578/1491212

标签： css html center absolute

【解决方案1】：

http://jsfiddle.net/sY4dh/将背景尺寸属性添加到上一个答案/

        #div1{
            background-color: red;
            background-image: url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 40% auto;
        }

【讨论】：

【解决方案2】：

做这样的事情，（还有很多其他的方法，这是实现你所描述的一种方法）

http://jsfiddle.net/nagendra_rao/9xZxk/4/

我已将此添加到您的 css 中，

.img{
    width:100%; 
    height:100%; 
    background:url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg') center center no-repeat;     /* this will automatically place your image file centred horizontally and vertically.*/ 
    background-size: 50% auto;
}
#center{
 height:100%;
}

像这样对你的 html 进行轻微修改，

<div class="img"></div>

【讨论】：

谢谢，但现在图像不再缩放。图像的宽度应适应屏幕尺寸。有什么解决办法吗？
已更新代码。现在它将根据浏览器宽度调整大小。