用css根据屏幕尺寸制作圆形图像

问题描述

我试图让我的图像变成圆圈。尽管这个图像有不同的宽度和高度，我希望它是圆形，看起来它们具有相同的宽度和高度长度。
例如;我的形象维度：250X300。
但是我希望它是200X200 circle.actually我可以很容易地做到这一点。问题在于根据屏幕尺寸做这个。当我将手机转为水平时，它必须根据屏幕尺寸进行更改。

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.

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

推荐答案

使用大众单位。它们取决于视口宽度。所以，它可以像宽度：2vw;高度：2vw;圆宽将取决于设备宽度。

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>

这篇关于用css根据屏幕尺寸制作圆形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！