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

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