高度根据纵横比，如HTML中的图像

Question

每当我们渲染图像时，其渲染的高度和宽度都可以根据父高度和宽度进行调整。我们可以说它根据宽高比进行渲染。

我想对div或span产生同样的效果。 fiddle

HTML

<div class="one">
  <img src="http://img.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg?size=338&ext=jpg" alt="">
</div>

<div class="one">
  <span></span>
</div>

CSS

.one {width: 200px;}
img {width: 100%; display:block}
span {display:block; background:red; max-width: 100%; height:100%!important; min-height:300px}