缩放时保持div纵横比，内部图像答案

【问题标题】：Keep div aspect ratio when scaling, with inner images缩放时保持div纵横比，内部图像
【发布时间】：2014-01-04 13:38:27
【问题描述】：

我一直在尝试构建一个具有固定纵横比的菜单，该菜单会根据浏览器窗口的大小进行缩放。为此，我使用带有背景图像的 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中设置宽度和高度来让它工作，但我想知道是否有更优雅的解决方案......

【问题讨论】：

<img />元素擅长保持自己的纵横比，你能依靠图像元素给包含<div />的高度吗？
@Jasper，是的，我也是这么认为的，但是对于几个图像，默认值似乎只是在水平空间不再足够时将它们垂直对齐，而不管我可能设置的固定高度如何。我被流畅的图片卡住了很长时间max-width:100%，直到我意识到有几张图片是不同的。我认为 Horatio 和 Maciej 的答案虽然有效，但我会在稍后有时间测试后接受其中一个......

标签： javascript html css image image-scaling

【解决方案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>

【讨论】：

还有display: block。这就是你要找的
你是对的。尽管在大多数浏览器中，添加浮点数会导致隐式 display:block。
我不知道。我必须阅读它，但我认为在 Firefox 中它不能以这种方式工作。

【解决方案2】：

你应该添加这个

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

这里有例子：

fiddle

【讨论】：