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 回答