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. 將CSS上的text-align:center添加到您的#mainlog容器中。
3. 在CSS #mainlog a display:inline-block添加到您的#mainlog a 。

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