Question

我有一个2000x2000像素的图像。我认为像素越多越好，质量损失也越少。现在我想在我的浏览器中将其显示为分辨率：500x500。

图像应该是div的背景，这就是我尝试过的方式：

<div id="layer1">
        <div id="house">&nbsp;</div>
</div>

#house {
    height: 500px;
    width: 500px;
    background: url(../images/House.gif);
}

只查看了部分图像。我希望整个图像可见。我正在使用div layer1，因为我有很多细节，除了房子。

如果有人能帮助我，我会很高兴

Answer 1

您可以使用background-size属性将背景设为div的确切大小。

#house {
    height: 500px;
    width: 500px;
    background: url(../images/House.gif);
    background-size: 100%;
}

Answer 2

这样做的方法是使用background-size并将元素的背景更改为默认值以外的某个新值。

background-size: width height;

因此，通过使用它，只需向该组添加一行代码

#house {
  height: 500px;
  width: 500px;
  background: url(../images/House.gif);
  background-size: 500px 500px;
}

http://jsfiddle.net/afzaal_ahmad_zeeshan/6nGEf/

Answer 3

您可以使用CSS或jQuery来执行此操作：

CSS Tutorial

jQuery plugins

但500x500不足以在许多设备上获得好看的背景

调整图像大小作为背景

3 个答案: