根據div高度調整img高度

我有這個奇怪的行爲，我不明白爲什麼。請幫助已瞭解了原因：

的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瀏覽器解釋的這個正確地格的高度設置爲總分辨率高的8.1％，然後在img高度爲div高度的100％，因此在觀看分辨率的8.1％。但是，在Windows機器上的Chrome並不能解釋這一點，它將img的高度設置爲觀看分辨率高度的100％。這是爲什麼發生？

來源

2013-09-25 s.calin

你是什麼意思的「觀看分辨率」？ – SunSparc

您需要調整html和body的大小。

變化html body{到html, body{（注意逗號）

http://jsfiddle.net/FXhPZ/

來源

2013-09-25 16:18:51 Moob

我不使用上面的代碼沒有看到我的最新的Chrome任何問題。圖像大小正確調整，與div成正比。

另一種方案是將圖像作爲背景，並利用

background-size: cover;

或

background-size: contain;

注意，此方法只在現代瀏覽器上運行。參考：http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2013-09-25 16:23:39

根據div高度調整img高度

回答

相關問題