0

大家好，

我有这个奇怪的 CSS，我不明白为什么。请帮助理解为什么：

CSS

html body{
width:100%;
height:100%;
background-color:#000;
margin:0;
}


.top
{
margin-left:7.5%;
margin-right:7.5%;
height:8.1%;  width:85%;
position:relative;
border-bottom:#FFFFFF solid thin;
}
.top img
{
height:100%;
}

的HTML：

<body>
<div class="top" align="center">
<img src="images/titlu_trans.png" alt="Sigla companie Calin Events"/>
</div>

现在 Safari 通过将 div 高度设置为总分辨率高度的 8.1%，然后将 img 高度设置为 div 高度的 100%，即查看分辨率的 8.1% 来正确解释这一点。但是 Windows 机器上的 Chrome 没有，并通过将 img 的高度设置为查看分辨率高度的 100% 来解释这一点。为什么会这样？

4

2 回答 2

1

您需要调整 html 和正文的大小。

更改html body{为html, body{（注意逗号）

http://jsfiddle.net/FXhPZ/

于 2013-09-25T16:18:51.847 回答
0

使用上面的代码，我的最新 Chrome 没有发现任何问题。图像大小适当调整，与 div 成比例。

另一种解决方案是将图像设置为背景，并使用

background-size: cover;

或者

background-size: contain;

请注意，此方法仅适用于现代浏览器。参考：http ://www.w3schools.com/cssref/css3_pr_background-size.asp

于 2013-09-25T16:23:39.380 回答