Question

大家好，

我有这个奇怪的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％来解释这一点。为什么会这样？

Answer 1

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

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

http://jsfiddle.net/FXhPZ/

Answer 2

我发现使用上述代码的最新Chrome浏览器没有任何问题。图像调整正确，与div成比例。

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

background-size: cover;

或

background-size: contain;

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

根据div高度调整图像高度

2 个答案: