html - 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/中心图像未拉伸(stretch)到外部 DIV 的 100% 高度。请帮忙。

Answer 1

您的图片高度为 200px，div 高度为 40%，因此您的图片不会在更大的屏幕上显示。

尝试为你的div设置一个固定的高度

#mainlog { 
  height:200px;
}

编辑

现在我知道问题出在哪里了；您正在为 a 和 img 标签使用 float:left。有了这个你可以解决你的问题:

1. 删除 a 和 img 的 float 和 left 属性。
2. 在 CSS 上添加到您的 #mainlog 容器 text-align:center。
3. 在 CSS 上添加到您的 #mainlog a display:inline-block。

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