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. 删除float。{/ li>的left和a and img属性
2. 在CSS上添加到#mainlog容器text-align:center。
3. 在CSS上添加到#mainlog a display:inline-block。

这些线将使你的img居中并使其适合容器。