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居中，并使其适合容器。