调整图像大小，固定位置

Question

我想保持这些横幅位置固定。并使它们可调整大小。因为在较小的显示器上，横幅可以随心所欲。而且它们总是比背景更大。如果你调整浏览器的大小，你可以看到我想说的。

http://mecanik.net/theback/5/index_1.html

.tab1{background-image:url(../images/tab1.PNG); width:302px;
height:201px; background-repeat:no-repeat; display:block;
position:absolute; top:18%; left:5%;}

Answer 1

由于它们的父 div 是背景，并且已经调整大小，因此您可以将图像大小设置为它的百分比。百分比高度和宽度是其父容器的百分比，因此应该使用 %15 之类的东西。由于您将它们显示为容器的背景，因此您需要使用 css background-size 属性。

请记住，除了 IE 8 和更早的 IE 版本之外，background-size 几乎适用于所有环境。

将.tab1的背景设置为images/tab1.PNG。删除 html img 标签，并尝试将以下代码添加到您的 css 中的 .tab1 。您必须稍微调整一下百分比，但它应该开始使事情规模化。

    background: url(../images/tab1.png); background-size: 100% auto; height:20%; width:30%;