问

仅使用CSS在矩形图像上的圆角

心雨00937 发布于 2022-12-28 16:26

css

http

我想使用半径边框从矩形图像创建圆形图像.

有没有简单的方法来实现这一点使用CSS而不扭曲图像并确保圆是完美的圆形.

看到失败的尝试:

http://jsfiddle.net/v8g3y0na/

.rounded-corners-2{
    border-radius: 100px;
    height: 150px;
    width: 150px;

这可以只在CSS中完成吗？

4 个回答

`object-fit`

img{
  width:80px;
  height:80px;
  border-radius: 50%;
  object-fit: cover;
}


<img src="http://placehold.it/800x400/0bf">


                
                    2022-12-28 16:27  回答
                       心若繁花花满地


                        
                http://jsfiddle.net/o8fwpug5/37/

这是对先前答案的略微更新.我喜欢另一个答案,但这更加流线型,并为包装器提供了基于像素的宽度.这样,您可以更轻松地查看和更改尺寸以用于您自己的目的.

HTML:

<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>


CSS:

div{
    height:200px;
    width:200px;
    position:relative;    
    border-radius:100%;
    overflow:hidden;
}
img{
    position:absolute;
    left:-50%; right:-50%; top:0;
    margin:auto;
    height:100%; width:auto;
}

        
                
                    2022-12-28 16:27  回答
                       121lzg
                
            
                        
                您可以通过向img添加父div来实现,代码流程如下所示

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}


更新了演示

        
                
                    2022-12-28 16:27  回答
                       徐成奕_98743
                
            
                        
                
  有没有简单的方法来实现这一点使用CSS而不扭曲图像并确保圆是完美的圆形.


是的,您也可以通过将图像设置为背景来避免使用父元素.您还可以使用background-position属性按位置定位图像.

更新以解决有关大小,圆度,倾斜和动态加载内容的问题.



setTimeout(function() {
	$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);

#image {
    display: block;
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
    border-radius: 200px;
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />


                
                    2022-12-28 16:28  回答
                       王小志2602928087



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签