0

我一直试图弄清楚这一点，但我尝试的一切都未能产生我所追求的结果。

所以设置如下

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/上运行的示例，其中包含预期输出的整个问题。

更新

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

4

4 回答 4

1

你能做这个吗

$("#resize").click(function() {
  $('.container').height("20px"); 
  $('.container .icon').width("20px"); 
});
于 2013-08-19T23:16:11.577 回答
0

尝试将 CSS 切换为图像大小

width: 100%;
height: auto;

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

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

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

于 2013-08-19T23:08:41.997 回答
0

这似乎触发了一些有趣的浏览器错误 - 它基本上在 Firefox 和 Chrome 中都可以正常工作，但两者都以不同的方式搞砸了元素调整大小。在 IE10 中，您的示例根本无法运行。

但是，对于您在现代 CSS3 时代根本不应该使用的预期结果animate，只需使用 CSS 过渡，就像这个示例 Fiddle 解决您的情况以在所有当前浏览器中工作。

于 2013-08-19T23:11:42.943 回答
0

尝试添加到动态更改的宽度

clear:right;

这将刷新容器

这是一个链接

http://www.w3schools.com/cssref/pr_class_clear.asp在此处输入链接描述

于 2013-08-20T07:56:48.807 回答