1

コードに含めた 1080p の画像があります。コードは Chrome では問題なく動作しますが、Firefox では問題があります。Firefox では画像の高さが機能しないため、最終的に画像が画面全体に表示されます。

さまざまな解決策を試しましたが、この問題を解決できませんでした。いくつかの解決策を見逃した可能性があります。

コードは次のとおりです。

#container{
    width:auto;
    height:60%;
    margin: 0 auto 0 auto;

}


#titleImage{

        max-width:100%;
        max-height:90%;
        width:100%;
}


<body>

   <div id="container">
        <img id="titleImage" src="throne.jpg" />
    </div>

このサイトのようなすべてのブラウザで画像の高さを同じにしようとしています。

よろしく

4

1 に答える 1

1

高さをパーセンテージに設定したため、Firefox では画像が異なります。ブラウザが異なれば、表示しているページの周りに GUI があるため、全画面表示でもブラウザの高さが異なります (これは、URL バー/お気に入りなどを表示するグラフィカル ユーザー インターフェイスです。

高さをパーセンテージで設定するべきではありません。代わりにこのようなものを試してください

#container{
    width: 60%;
    height: auto;
    margin: 0 auto;
}

幅はお好みで調整してください。作成された JSFiddle Chanckjh を使用すると、70% になります。更新された JSFiddle でわかるように、問題はブラウザー間で修正されています。

http://jsfiddle.net/m6VBz/19/

これが役に立ったことを願っています！

于 2013-09-22T22:00:58.580 に答える