CODEWITHSUNDEEP
cssionic-frameworkcircleimage
seyid yagmur
seyid yagmur

Reputation: 1712

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;   
}

Upvotes: 7

Views: 9972

Answers (3)

sms247
sms247

Reputation: 4504

Use background-size: 100% 100%; in your style will be like

div { 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
<div style="background-image: url(https://picsum.photos/200/200)"></div>

JSFiddle Playground

Upvotes: 1

Victor Ejiogu
Victor Ejiogu

Reputation: 1384

For >ionic2

.hide-card {
  -webkit-box-shadow: none !important;
}

.custom-avatar {
  height: 30vw;
  width: 30vw;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
<ion-card text-center class="hide-card">
  <img src="http://picsum.photos/300/200" class="custom-avatar" />
  <h2>Example</h2>
  <p>Have some p tag here</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
  <hr>
</ion-card>

Upvotes: 2

Deepak Yadav
Deepak Yadav

Reputation: 7109

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>

Upvotes: 9

Related Questions