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 acording to screen size.when I turn my mobile phone to horizontal, it must change acording to screen dimensions.
my css code is below
.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;
}
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.