css fixed ratio demo3

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

HTML

<body>
  <div class="contain">
    <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;
            width: 100%;
            height: 100%;
        }

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

        .item {
            float: left;
            background-color: darkslategrey;
            border: 1px solid black;
            margin: 5%;
            width: 20vw;
            height: 20vw;
        }