缩放时保持div长宽比，并带有内部图像

Question

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

我将以下技巧与padding-bottom配合使用以保持宽高比：

padding-bottom:10%;

从保持/缩放DIV比率与百分比 。

调整大小时可以使用，并保持宽高比。 现在，当我将菜单项添加为图像时，我无法完全理解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;}

这里有例子：

小提琴