javascript - 如何使导航中的圆形图像响应

Question

我有一个带有 div 的聊天导航栏，用于不同的用户，其中有一张用户的照片。我希望照片是一个圆圈。我用 padding-bottom 和 width 来做，但是当屏幕的 width:height 比变大时问题就来了，圆比 nav 大，因为 padding-bottom 是由宽度计算的。使所有屏幕响应的最佳方法是什么？ https://jsfiddle.net/n386ejzf/

    html{
        width: 100%;
        height: 100%;
    }
    body{
      width: 100%;
      height: 100%;
    }
    .chats{
        height: 20%;
        width: 100%;
        background: red;
    }
    .chat{
      float: left;
      width: 20%;
      height: 100%;
      background: yellow;
      display: flex;
      align-items: center;
    }
    .img{
      width: 10%;
      padding-bottom: 10%;
      background: blue;
      border-radius: 50%;
    }

    <div class="chats">
        <div class="chat">
            <div class="img">
            </div>
        </div>  
    </div>

Answer 1

使用视口(viewport)高度单位。

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

.chats {
  height: 20%;
  width: 100%;
  background: red;
}

.chat {
  float: left;
  width: 20%;
  height: 100%;
  background: yellow;
  display: flex;
  align-items: center;
}

.img {
  margin: auto;
  width: 10vh;
  height: 10vh;
  background: blue;
  border-radius: 50%;
}

<div class="chats">
  <div class="chat">
    <div class="img">
    </div>
  </div>
</div>