将图像绝对定位在 bootstrap 导航栏列表项中而不影响导航高度？

Question

这个问题已经解决了，但是由于某种原因我不能再过两天接受我自己的问题的答案了？

我有一个合理的 bootstrap 导航，其中一个项目需要一个图像，我的问题是我可以这样做，但导航的高度会发生变化以匹配图像的高度，但我需要导航保持在 50 像素左右的高度，并且图像或多或少地覆盖导航 - 此处示例：

我试着在列表项中制作一个 div 作为图像的容器，相对定位并给它一个与图像宽度相同的固定宽度，但列表项会覆盖图像：

HTML

<div class="logo-nav">  
    <a href="#">
        <img src="http://placecage.com/c/141/141" alt="">
    </a>
</div>

CSS

.logo-nav {
    position: relative;
    width: 141px;
}
.logo-nav a {
    position: absolute;
}

我不明白为什么下面的列表项不考虑容器 .logo-nav 的宽度？

Answer 1

我猜你想要这样的东西：http://jsfiddle.net/2vp56uta/2/

感谢 CSS3 后台属性你可以很容易地解决这个问题。但是如果你想在你的页面中放置很多不同的图像，我建议你最好寻找不同的解决方案。

<li><a id="img" href="#"></a></li>

#img {
background:url('http://placecage.com/c/141/141')no-repeat center;
background-size:contain;
}

Answer 2

假设我理解你想要完成的事情（我不确定你所说的 "overlay" 到底是什么意思），something like this 看起来它会如你所愿。

.logo-nav {
  height: 50px;
}

.logo-nav a img {
  height: 100%;
}

您尝试这样做的方式存在问题，position: absolute 从布局流程中取出了一个元素，导致页面布局就像该元素不存在一样。

Answer 3

对不起，我一定没有解释清楚，我希望图像的宽度和高度为 100%，导航位于其后。话虽如此，尽管我使用边距而不是宽度来解决它，但它会将列表项推到右侧。

.logo-nav {
    position: relative;
    margin-right: 141px;
}
.logo-nav a {
    margin-right: 1px;
}
.logo-nav img {
    position: absolute;
}

标记现在只需要清理并提高效率:)！

谢谢大家的回答！