Question

我有一张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>

我正试图在所有浏览器上实现类似的高度，例如site。

此致

Answer 1

Firefox中的图像不同，因为您将高度设置为百分比。由于您正在查看的页面周围的GUI，不同的浏览器即使在全屏幕中也会有不同的浏览器高度（这是向您显示URL栏/收藏夹等的图形用户界面。

你真的不应该把高度设置为百分比。尝试这样的事情

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

根据您的需要调整宽度。使用JSFiddle Chanckjh创建它将达到70％。正如您在更新的JSFiddle中看到的那样，问题在浏览器之间得到修复。

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

希望这有帮助！

图像调整大小不适用于FireFox

1 个答案: