1

実際には.png画像である小さなブロックを表示しようとしています。

css を使用して小さなブロックの画像プロパティを幅 2%、高さ 2% に設定しました。

この画像は、幅 100%、高さ 100% に設定された本文の内側にあります。

私の問題は、Firefox では画像が正しく表示されることです。たとえば、正方形のように見えますが、Chrome では長方形のように見えます。画像の幅は正しい (2%) ようですが、高さが正しくないようです。

私の例を説明するための写真を次に示します。

Firefox: (これは私が欲しいものです)

ここに画像の説明を入力

Chrome: (これは私が望んでいないことです。Firefox での表示のようにしたいのです)。

ここに画像の説明を入力

内部にjavascriptとcssを含むhtmlを使用しています。これが私のコードです:

<!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

* {margin:0;padding:0}css ファイルの先頭にa を追加してみてください。

CSSリセットの追加も検討してください

編集：

そういえば、そのディレクトリに bgimage.png はありますか？また、次のように設定img.widthして、javascript内で試すこともできますimg.height

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

于 2012-09-13T05:09:23.337 に答える
0

本体は に設定されている可能性がありますheight: 100%が、その親コン​​テナー (html) は設定されていません。

于 2012-09-13T12:04:56.343 に答える