CODEWITHSUNDEEP
javascripthtmlcss
ivaylo
ivaylo

Reputation: 841

How to make circle image in nav responsive

I have a chat nav bar with divs for different users in which there is a photo of the user. I want the photo to be a circle. I am doing it with padding-bottom and width, but the problem comes when the width:height ratio of the screen gets bigger the circle gets larger than the nav , because of the padding-bottom being calculated by the width. What is best approach to make this responsive for all screens?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>

Upvotes: 0

Views: 701

Answers (1)

Paulie_D
Paulie_D

Reputation: 115109

Use viewport height units.

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>

Upvotes: 2

Related Questions