用于传播父元素

Question

我想在img元素上实现一些高度百分比设置的布局，它在第一次加载时表现完美，但我发现当浏览器调整大小时img元素无法传播父元素。

父元素的宽度仍然是前一个宽度，并且在调整大小后不会改变。

如何在没有js和纯CSS的情况下修复它？

这里有一些示例代码：

html,body{
  width:100%;
  height:100%;
  margin:0;
}
.container{
  height:100%;
  float:left;
  background:yellow;
}
img{
  height:30%;
  width:auto;
}

<div class="container">
  <img src="http://i.stack.imgur.com/EOYdZ.jpg">
</div>

Answer 1

我不确定我是否正确理解了你的问题但是创建了一个codepen脚本。你可以查看它here。添加了“宽度：30％”属性

html,body{
  width:100%;
  height:100%;
  margin:0;
}
.container{
  float:left;
  background:yellow;
}
img{
  width:30%;
  height:30%;
}