cssionic-frameworkcircleimage

Make circle image according to screen size with CSS

I am trying to make my images to circle. Despite this image has different width and height, I want it to be circle that seems like they have same width and height length.

For example; dimension of my image: 250x300, but I want it to be 200x200 circle. Actually I can do this easily. The problem is doing this according to screen size. When I turn my mobile phone to horizontal, it must change according to screen dimensions.

.image {
  height: 100px; 
  width: 100px; 
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px gray;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;   
}
Solution

  • Use vw units. They are dependent on viewport-width. so, it can be like width: 2vw; height: 2vw; Circle width will depend upon the device width.

    .image {
  height: 5vw; 
  width: 5vw; 
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px gray;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
    <div class="image"></div>