在引导程序导航栏列表项中绝对定位图像，而不影响导航高度

Question

这个问题已经解决了，但由于某种原因，我还要两天才能接受自己问题的答案

我有一个合理的引导导航，需要为它的一个项目提供一个图像，我的问题是我可以这样做，但导航的高度会发生变化，以匹配图像的高度，但我需要导航保持在50像素左右的高度，并使图像或多或少地覆盖导航-例如：

http://jsfiddle.net/2vp56uta/

我试着在列表项中创建一个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;
}

此处的示例：http://jsfiddle.net/2vp56uta/1/

我不明白为什么下面的列表项不考虑容器的宽度。徽标导航？

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

假设我理解你想要实现的目标（我不确定你所说的"覆盖"到底是什么意思），像这样的事情似乎会实现你想要的。

.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;
}

http://jsfiddle.net/x3rsy53d/3/

Markup现在只需要清理并提高效率：）！

谢谢大家的回答！