图像调整大小不工作在FireFox

问题描述：

我有我的代码中包含的1080p图像。该代码可以在Chrome上正常运行，但Firefox上存在问题。在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所有的浏览器的图像高度相似。

问候

请你给我们在jsfiddle或你的服务器上的例子吗？ –

您提供的网站正在使用[CSS Media Queries]（http://css-tricks.com/css-media-queries/）。 – mdesdev

高度不起作用？图像是否恢复原来的高度？我不能再现你的问题。它在这个jsfiddle http://jsfiddle.net/m6VBz/1/ – Chanckjh

答

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

您真的不应该设置高度为百分比。尝试，而不是像这样

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

调整宽度，以你的愿望。使用的jsfiddle Chanckjh创建它会在70％左右。正如你可以在更新的jsfiddle看到的问题是固定的在浏览器之间。

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

希望这有助于！

图像调整大小不工作在FireFox

相关推荐