height according to aspect ratio like image in HTML

Question

Whenever we render an image its render with set of height and width that can be adjust itself according to parent height and width. We can say it render according to aspect ratio.

The same effect I want to have on div or 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}