HTML

<div class="container">
        <div class="icon-holder">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
        </div>
        <div class="icon-holder">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
        </div>
        <div class="icon-holder">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
        </div>
        <div class="icon-holder">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
        </div>
        <div class="icon-holder">
            <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
        </div>
    </div>

CSS

.icon-holder {
    float:left;
    height:100%; 
    width:auto;
}

.container {
    height:100px;
}

.icon {
    height:auto;
    width: auto;
    max-height: 100%;
    display:block;
}

.container-before {
    height:100px;
}

.container-after {
    height:20px;
}

现在的问题在于，如果我使用javascript调整容器大小，我需要使用它来调整图像大小，并且两者之间没有间距。我需要一个有效的CSS解决方案，我知道我可以用JS破解它，但那不是我想要完成的。

我有一个示例在整个问题的http://jsfiddle.net/twmxh/3/运行，预期输出。

更新

关于实施的更多信息。 container div实际上是一个带有调整大小句柄的工具栏。所以容器是我可以应用新高度的唯一元素。

Answer 1

你能做到吗

$("#resize").click(function() {
  $('.container').height("20px"); 
  $('.container .icon').width("20px"); 
});

Answer 2

尝试将CSS切换为图像尺寸

width: 100%;
height: auto;

我不认为高度和百分比在大多数浏览器中都表现良好

这通常是如何定义“响应”图像的大小...而宽度将始终适合容器的大小，高度将自动跟随。

编辑代码，使动画按宽度缩放，而不是按高度缩放。看看是否有效。

Answer 3

这似乎触发了一些有趣的浏览器错误 - 它在Firefox和Chrome中都运行良好，但两者都以不同方式调整元素大小。在IE10中，您的样本根本不运行。

但是，对于预期的结果，您不应该在这些现代CSS3中使用animate，而只需使用CSS转换，like this example Fiddle solving your case to work in all current browsers。

Answer 4

尝试添加动态更改的宽度

clear:right;

这将刷新容器

这是一个链接

http://www.w3schools.com/cssref/pr_class_clear.asp enter link description here

如何正确调整浮动元素的大小

HTML

CSS

更新

4 个答案: