Question

我有一个针对不同用户的div聊天导航栏，其中有该用户的照片。我希望这张照片是一个圆圈。我正在使用padding-bottom和width进行操作，但是问题是当屏幕的width：height比例变大时，圆变得比nav大，这是因为padding-bottom是由width计算的。使所有屏幕都响应的最佳方法是什么？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

使用视口高度单位。

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>

如何在导航响应中制作圆形图像

1 个答案: