javascript - 缩放时保持 div 纵横比，内部图像

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 的高度。您可以通过 float 它们来阻止它们这样做。此外，如果您希望它们始终适合容器，则需要调整图像的宽度。所以，这样的事情可能会奏效:

#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>