Question

所以我在这里有这个图像

“http://i.imgur.com/eh71foN.png”

我的问题是每当我调整窗口大小时，质量效应图像都不会随之调整大小。

变得像这样

“http://i.imgur.com/jaDV7jG.png”

我一直试图解决这个问题。有人能指出我正确的方向吗？

   #MassEffectSign {
        background: url(masseffect12.png) center top no-repeat;
        top: 25px; left: 750px; z-index: 2;
        padding: 250px;
        position: absolute;
    }

我的蓝色背景

#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }

Answer 1

在CSS中使用img标签代替背景图片。

img {width: 100%}

Answer 2

您的定位是绝对的，因此它将独立于比例移动。把它放在一个相对定位的div中，然后就可以了。

例如，

<div style="position:relative;">
   <div id="MassEffectSign">&nbsp;</div>
</div>

希望这有帮助。

Answer 3

将百分比用于相关值。

top: 25px; left: 45%;

这使得左边缘和图像之间的空间量相对于窗口大小。玩一点价值来使它居中，你应该很好。

动态调整图片大小

3 个答案: