1

我正在尝试显示一个实际上是 .png 图像的小块。

我使用 css 将小块的图像属性设置为 2% 宽度和 2% 高度。

此图像位于主体内部，设置为 100% 宽度和 100% 高度。

我的问题是，图像在 Firefox 中正确显示，例如，它看起来像一个正方形，但在 Chrome 中，它看起来像一个矩形。图像宽度似乎正确（2%），但高度似乎不正确。

这里有图片来说明我的例子：

火狐：（这就是我想要的）

在此处输入图像描述

Chrome：（这是我不想要的。我希望它看起来像在 Firefox 中的样子）。

在此处输入图像描述

我正在使用带有javascript的html和css，这是我的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testlayout.css" />
<script>    

var x;

function myFunction()
{                   
    var img = new Image(); 
    img.src = 'bgimage.png';
    document.body.appendChild( img );                                       
};

</script>
</head>
<body onload="myFunction()"> 

</body>
</html>

这是我的CSS：

body
{
margin:0; padding: 0; cellspacing: 0;
line-height: 0;  /* removes gap betwen rows */
height: 100%;
width: 100%;
}

img
{
height: 2%;
width: 2%;
}

就这样。如果你们知道问题是什么，请告诉我，任何帮助将不胜感激。谢谢！

4

3 回答 3

1

Firefox 和 chrome 上的窗口大小可能不同。在这种情况下，使用像素值而不是百分比。

img 
{
    height: 50px;
    width: 50px;
}
于 2012-09-13T05:11:12.240 回答
0

尝试将 a 添加* {margin:0;padding:0}到您的 css 文件的开头。

还考虑添加一个 CSS 重置

编辑：

现在我想了想，您确定 bgimage.png 存在于该目录中吗？您也可以尝试在您的 javascript 中设置img.width和img.height类似这样

http://jsfiddle.net/2Uk53/1/

于 2012-09-13T05:09:23.337 回答
0

您的 body 可能设置为height: 100%，但其父容器 (html) 不是。

于 2012-09-13T12:04:56.343 回答