html - 停止图像调整包含 DIV 的大小

Question

我在一个使用 960 网格系统的网站上工作。导航有问题。与其尝试解释，不如给你看一张我要做什么的图片

我认为最好的方法是让一个名为 navHolder 的 DIV 一直延伸到整个屏幕。 navHolder 内部是一个 div，带有一类容器，将其保存在 960 系统中。我会给 navHolder 一个顶部和底部边框来实现效果。

这是HTML

<div id="navHolder">
    <div class="container_12">
        <div class="grid_4" id="leftNav">
            <ul class="leftNav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">ABG Way</a></li>
            </ul>
        </div>
        <div class="grid_4" id="logo">
            <img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
        </div>
        <div class="grid_4" id="rightNav">
            <ul class="rightNav">
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Media</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>

问题是图像强制 navHolder 变大，因此顶部和底部边框失去了预期的效果。

这里是图片过大的截图

Screenshot

我试图给图像一个

position:absolute

阻止它调整 div 的大小。这有效，但是，这会导致导航选项在其后面折叠。这是截图

我试图创建一个 fiddle 来重现这个场景

Fiddle

但它并不完全相同。

那么我的问题是，有没有一种方法可以设置此图像，使其不调整其包含的 DIV 的大小并且仍然保留其在导航中的位置，使其位于图像的两侧？有没有比我目前正在做的更好的方法来解决这个问题？

Answer 1

我会给容器 <div>所需的大小并将图像设置为没有repeat的背景而不是使用 <img> , 并申请 background-size: 100%;

查看更多 CSS Background Properties @ MDN