根据屏幕大小使用css制作圆形图像

我正在尝试将图像制作为圆形。尽管此图像具有不同的宽度和高度，但我希望它是圆形，似乎它们具有相同的宽度和高度。例如， ;我的图像尺寸：250X300。但我希望它是200X200 circle.actually我可以很容易做到这一点。问题是这样做的屏幕尺寸。当我把我的手机水平，它必须改变屏幕尺寸。根据屏幕大小使用css制作圆形图像

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

来源

2016-08-23 seyid yagmur

使用'vw'单位。它们依赖于视口宽度。所以，它可以像'width：2vw; height：2vw;'圆圈的宽度取决于设备的宽度。而你正在使用移动设备。所以，也不会有任何支持问题。 –

实际上，我不擅长css，但它似乎可以帮助我。我试试这个 –

是的，没问题，只需用'vw'替换你的'px'单元然后检查......根据你的设置，你想要多少价值，比如'5vw'或'50vw'。请记住** 1vw =视口宽度的1％** –

使用VW单位。它们依赖于视口宽度。所以，它可以像宽度：2vw;身高：2vw;圆宽度取决于设备宽度。

.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>

来源

2016-08-23 11:03:54

我觉得这个答案是缺少一个'溢出：隐藏;'。 – Bram

哥使用背景尺寸：100％100％; 你的风格会像

div { 
     background-size: 100% 100%; 
     background-repeat: no-repeat; 
     border-radius: 50%; 
     width: 200px; 
     height: 200px; 
    }

演示链接： http://jsfiddle.net/vNh8t/314/

来源

2016-08-23 06:39:18 sms247

兄弟，没关系，但是当我缩小或放大我的屏幕时，它必须以相同的比例扩展.. –

朋友，当你添加背景大小：100％100％;在你的div类中，然后尺寸增加wrt到屏幕分辨率，你可以用ctrl +“+”按钮测试你也可以检查我的jsfiddle例子 – sms247

我试过vw代替px。，“Deepak Yadav”。我想我找到了解决方案。谢谢弟弟:)链接：http://jsfiddle.net/r43LL1ny/ –

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

请让我再知道如果这是对你有用。

来源

2017-07-28 15:08:44

你应该在'vw'部分放一些东西;） – m02ph3u5

vw是视口宽度。请在这里阅读更多https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ –

根据屏幕大小使用css制作圆形图像

回答

相关问题