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

【问题标题】：CSS image resizing (using width and hight) differs in Chrome and FirefoxCSS 图像大小调整（使用宽度和高度）在 Chrome 和 Firefox 中有所不同
【发布时间】：2012-12-04 01:09:46
【问题描述】：

我有点困惑。我尝试使用 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>

【问题讨论】：

标签： css google-chrome firefox resize width

【解决方案1】：

我认为您缺少 % 或 px

background-size: 100% 100;

我已经在 Chrome、IE 和 Firefox 中测试了this jsfiddle，结果很好。我还添加了 no-repeat，以防需要放大较小的图像。

【讨论】：

谢谢。 % 在那里。我在上面编辑了我的帖子。我也试过不重复。不幸的是，结果仍然很不幸。我什至尝试使用您使用的相同图片链接 (lorempixel.com/600/600)。 Chrome 会拉伸图像，而 Firefox 只是裁剪它。

【解决方案2】：

尝试固定背景位置，然后将其添加到您的 html 中。

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

【讨论】：

【解决方案3】：

我还在 Firefox (17.0.1 -- OSX) 中尝试过您的代码。

有和没有

<!DOCTYPE html>

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

我猜你应该检查一下 CSS 中的拼写错误。

【讨论】：

老兄，你拯救了我的一天！ :-) 我忘了声明文档类型。现在它适用于所有浏览器。不过，在没有的最新 FF 版本上无法使用。