[英]make circle image acording 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.
我的形象尺寸: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.
但我希望它是200X200圈。实际上我可以很容易地做到这一点。问题在于根据屏幕尺寸进行此操作。当我将手机转为水平时,它必须根据屏幕尺寸进行更改。
my css code is below 我的css代码如下
.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;
所以,它可以像宽度:2vw;高度: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>
For >ionic2 对于> ionic2
<ion-card text-center class="hide-card">
<img src="http://placehold.it/300x200" class="custom-avatar"/>
<h2>Victorcodex</h2>
<p>Have some p tag here</p>
<p>I am the third guy inline here</p>
<hr>
</ion-card>
.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;
}
Kindly lemme know if this was useful to you. 请知道这是否对您有用。
brother use background-size: 100% 100%; 兄弟使用background-size:100%100%; your style will be like
你的风格会是这样的
div {
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 50%;
width: 200px;
height: 200px;
}
demo link: http://jsfiddle.net/vNh8t/314/ 演示链接: http : //jsfiddle.net/vNh8t/314/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.