css fixed ratio demo2

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

HTML

<body>
  <div class="contain">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

CSS

html,
        body {
          margin: 0;
          padding: 0;
        }
        
        .contain {
          width: 100%;
          height: 100%;
        }
        
        .item {
          float: left;
          background-color: darkslategrey;
          border: 1px solid black;
          margin: 5%;
          width: 20%;
          height: 0;
          padding-bottom: 20%;
        }