根据屏幕大小使用CSS制作圆形图片

Question

我正在尝试将我的图像变成圆形。尽管这些图像具有不同的宽度和高度，我希望它们看起来像具有相同的宽度和高度长度的圆形。

例如：我的图像尺寸为250X300。但是我想要它成为一个200X200的圆形。实际上，我可以很容易地做到这一点。问题在于根据屏幕尺寸进行调整。当我将手机横向旋转时，它必须根据屏幕尺寸进行更改。

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

- seyid yagmur

---

请使用vw单位。它们依赖于视口宽度，因此可以像width: 2vw;height:2vw;这样。圆的宽度将取决于设备的宽度。由于您正在处理移动设备，所以也不会有任何支持问题。 - Deepak Yadav

实际上，我不擅长 CSS，但似乎它可能会对我有所帮助。让我试试看。 - seyid yagmur

没问题，只需要将你的 px 单位替换为 vw 并检查一下.. 根据这个可以设置你想要的值，比如 5vw 或者 50vw。记住 **1vw = 视口宽度的1%**。 - Deepak Yadav

我明白了@DeepakYadav，非常感谢 :) - seyid yagmur

太好了。我已经再次将其发布为答案。所以如果它起作用了，你可以将其标记为接受的答案并关闭这个问题。 - Deepak Yadav

当然，再次感谢你！ :D - seyid yagmur

Answer 1

使用vw单位。它们依赖于视口宽度，因此可以像width: 2vw；height: 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>

- Deepak Yadav

---

我认为这个答案缺少了一个 overflow: hidden;。 - Bram

Answer 2

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

请告诉我这是否对您有用。

- Victor Ejiogu

---

你应该在 vw 部分加一些重点 ;) - m02ph3u5

vw是视口宽度。请在此处阅读更多信息：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ - Victor Ejiogu

Answer 3

兄弟使用background-size: 100% 100%; 你的样式将会像这样

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

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

- sms247

---

兄弟，这样可以，但当我缩小或放大屏幕时，它必须按相同的比例扩展。 - seyid yagmur

当你在div类中添加background-size: 100% 100%;时，背景大小会根据屏幕分辨率比例增加。你可以使用ctrl + "+"按钮进行测试，也可以查看我的jsfiddle示例。 - sms247

我尝试使用vw而不是px。"Deepak Yadav"。我认为我找到了解决方案。谢谢兄弟 :) 链接：http://jsfiddle.net/r43LL1ny/ - seyid yagmur

太棒了，兄弟！祝你余下的项目好运 :) - sms247