Question

我有点困惑。我尝试使用CSS调整图像大小。在Safari和Chrome中，图像会重新调整大小，在IE和Firefox中，它会保持原始尺寸，但会产生作物。我需要更改什么才能在FF和IE中重新调整大小？ CSS如下所示：

body {
    background-color:black;
    width: 100%;
    height: 100%;
}

#image1 {
    background-image: url(img/myimage.png);
    background-size: 100% 100%;
    position: absolute;
    width: 532px;
    height: 250px;
    top: 100px;
    left: 100px;
}

和身体：

<body> <div id='image1'></div> </body>

Answer 1

我也在Firefox（17.0.1 - OSX）中尝试过您的代码。

有无

<!DOCTYPE html>

图像实际上按预期调整大小。

我猜你的CSS会检查拼写错误。

Answer 2

我认为你错过了

中的％或px

background-size: 100% 100;

我在Chrome，IE和Firefox中测试了this jsfiddle并获得了良好的效果。如果需要缩小较小的图像，我还添加了无重复。

Answer 3

尝试修复背景位置，然后将其添加到html。

<img src="img/myimage.png" alt="background image" id="image1" />

CSS图像大小调整（使用宽度和高度）在Chrome和Firefox中有所不同

3 个答案: