Question

我一直在尝试构建一个具有固定宽高比的菜单，该菜单根据浏览器窗口的大小进行缩放。为此，我使用带有背景图像的div，如下所示： http://jsfiddle.net/keroben/9seaM/

我使用padding-bottom的以下技巧来保持宽高比：

padding-bottom:10%;

来自Keeping/scaling DIV Ratio with percentages。

调整大小时保持宽高比。现在，当我将菜单条目添加为图像时，我无法确定div的高度保持不变（http://jsfiddle.net/keroben/aT3Vz/）：

<div id="cool" >
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>
    <img src="https://dl.dropboxusercontent.com/u/18518333/clear.png"/>    
</div>

我也尝试了其他各种技术，但没有任何效果。我开始认为我只能通过在javascript中直接设置宽度和高度来实现这一点，但我想知道是否有更优雅的解决方案......

Answer 1

问题是图像会改变div的高度。你可以通过浮动来阻止他们这样做。此外，如果您希望它们始终适合容器，则需要调整图像的宽度。所以，这样的事情可能有用：

#cool img {
    float:left;
    width:25%;
    height: auto;
}

为了创建语义HTML，您可能希望将标记更改为以下内容：

<nav>
    <ul>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 1"/></a></li>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 2"/></a></li>
        <li><a href="#"><img src="/my/cool/image.png" alt="Menu item 3"/></a></li>
    </ul>
</nav>

Answer 2

你应该添加这个

#cool img{display:block;float:left;width:25%;height:auto;}

这里有例子：

fiddle

在缩放时保持div纵横比，使用内部图像

2 个答案: