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

标签 css html position margin autoscaling

我正在努力解决这个问题,但我没有取得太大进展。我有一个背景图像,它可以自动缩放到任何窗口大小。在它前面,我试图将固定在页面底部的图像居中,同时可缩放。这是我现在拥有的 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>

我最终得到的是固定在页面底部的图像,并且是可缩放的,但我从来没有能够将它也居中。有什么想法吗?我将不胜感激!

最佳答案

我可以看到你的图片已经在一个 Div 中 使 div relative 和 margin auto 具有与您的图像相同的宽度,一切都应该正常工作。

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

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

    } 

关于css - 居中和底部对齐时自动调整 div 中的图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12361851/

相关文章:

javascript - 如何使用 ExtJS 4.1 实现委托(delegate)器

html - 调整窗口大小时如何使图像和文本在 HTML 中对齐?

html - 将图库与其余内容对齐

javascript - Bootstrap 网格系统容器/嵌套

javascript - 从以前的 TD 设置 TD 值

html - 悬停图像

php - 如何在 PHP 代码中使用 Select 显示多列

javascript - 在 fabricJS 中将 JSON 加载到 Canvas 上后,文本位置发生了变化

python - pygame如何检查鼠标坐标

jquery 和 css 根据其他包装器中的 div 设置位置