DIV中的圖像無法響應變量的高度和寬度

Question

我正在使用此代碼將圖像置於100％DIV中。

#mainlog{width:100%;margin-top:15px; height:40%;background-image:url("../images/mbg.png");border-width:0px 0px 5px 0px;border-style:solid; border-color:#f28438} 
    #mainlog a{position: relative;left: 50%;float: left;} 
    #mainlog img{position: relative;left: -50%;float: left;} 

下面是HTML代碼：

<div id="mainlog"> 
    <a href="index.php"><img src="images/logo.png" height="100%" width="" alt="Escener Technologies"/></a></div> 

所以實際的問題是什麼： 你可以在這裏看到http://m.escener.com/ 中心圖像沒有延伸到外部DIV的100％的高度。請幫忙。

Answer 1

您的圖片高度爲200px，div高度爲40%，因此您的圖片不會在較大的屏幕上顯示。

嘗試將固定高度設爲您的DIV

#mainlog { 
    height:200px; 
} 

編輯

現在我看到的問題是什麼; float:left的a和img標籤。有了這個，你可以解決你的問題：

1. 爲a and img取出float和left性能。
2. 加入您的#mainlog集裝箱text-align:center在CSS上。
3. 加入您的#mainlog adisplay:inline-block的CSS。

這些行將使您的img居中並使其適合容器。