Question

我正试图绕过这个问题，而且我没有多少理由。我有一个背景图像，可以自动缩放到任何窗口大小。在它的前面，我试图将一个固定在页面底部的图像居中，同时可扩展。这是我现在拥有的CSS。

        #guys img{
            width:35%;
            margin-left:auto;
            margin-right:auto;
            bottom:0px;
            position: fixed;
        }

这就是我打电话给DIV的方式

    <div id="guys">
        <img src="img/boys.png" alt="">
    </div>

我最终得到的是图像固定在页面底部，并且可扩展，但我从来没有能够最终将它放在中心位置。有什么想法吗？我会非常感激的！

Answer 1

我可以看到你的影像已经在Div中了将div相对和margin自动调整为与Image相同的宽度，一切都应该正常工作。

        #guys{
        position:relative;
        margin:auto;
        width:35%;

    }       
       #guys img{
        width:35%;
        bottom:0px;
        position: fixed;

    }

Answer 2

固定位置后，保证金自动停止工作。

作为替代方案，你可以给img一个左边值50％（用图像的左边排列页面的中心），然后给出-17.5％的左边距离，移动中心的图像到页面中心。

查看我的jsfiddle。

摘录：

#bottomCentered {

    left: 50%;
    margin-left: -17.5%; /* Half of the width */

    position: fixed;
    width:35%;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    position: fixed;
    display: inline-block;
    height: 20px;
    background: #00FF00;
}

在居中和底部对齐时自动调整div中图像的大小

2 个答案: