css fixed ratio demo1

响应式网页中，如何只用CSS实现div的高和宽保持固定比例

HTML

<div class="contain">
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
  <div class="item"><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97400&w=300&h=400" /></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.contain {
  width: 100%;
  height: 100%;
}

.item img {
  float: left;
  margin: 5%;
  width: 20%;
}