html-矩形图像的CSS圆形裁剪

我想从矩形照片制作一个居中的圆形图像。照片的尺寸未知。 通常是矩形形式。我尝试了很多方法:

CSS:

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}

HTML:

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>
49volro asked 2020-01-13T11:55:25Z
8个解决方案
82 votes

该方法是错误的,您需要将<div class="image-cropper"> <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" /> </div>应用于容器div,而不是实际的图像。

这将工作:

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>
<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

Johnny Kutnowski answered 2020-01-13T11:56:57Z
19 votes

如果您可以不用<div id="image1" class="cropcircle"></div>标签生活,建议您将照片用作背景图像。

<div id="image1" class="cropcircle"></div>
<div id="image1" class="cropcircle"></div>

Tom answered 2020-01-13T11:58:22Z
16 votes

<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded">属性提供了一种非骇客的方法(以图像居中)。 除了Internet Explorer,它已经在主要浏览器中受支持了几年(2013年以来为Chrome / Safari,自2015年以来为Firefox,自2015年以来为Edge)。

<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded">
<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded">

Dispenser answered 2020-01-13T11:59:47Z
10 votes

尝试这个:

img {
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

演示在这里。

要么:

.rounded {
    height: 100px;
    width: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:url("http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg") center no-repeat;
    background-size:cover;
}

演示在这里。

Hiral answered 2020-01-13T12:00:20Z
2 votes

约翰尼的解决方案很好。 我发现添加min-width:100%确实可以帮助图像填充整个圆圈。 您可以结合使用JavaScript以获得最佳效果,或者如果真的很认真地使用它,可以使用ImageMagick-[http://www.imagemagick.org/script/index.php]。

<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>
<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>

evanjmg answered 2020-01-13T12:01:45Z
1 votes

插入图像,然后反手需要做的就是:

<style>
img {
  border-radius: 50%;
}
</style>

**图像代码将自动在此处**

Megan Rawls answered 2020-01-13T12:02:09Z
0 votes

我知道上述许多解决方案都可以使用,您也可以尝试flex。

但是我的图像是矩形的,无法正确拟合。 所以这就是我所做的。

.parentDivClass {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 20px;
    display: flex;
    justify-content: center;
}

对于里面的图像,您可以使用

child Img {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

当您使用bootstrap 4类时,这将很有帮助。

Akshay L answered 2020-01-13T12:02:43Z
-2 votes

您需要使用jQuery来做到这一点。 这种方法使您能够拥有动态图像,并且无论大小如何都可以对其进行舍入。

我的演示现在有一个缺陷,我没有将图像居中放置在容器中,而是在一分钟之内无法恢复(需要完成我正在处理的脚本)。

演示

<div class="container">
    <img src="" class="image" alt="lambo" />
</div>

//script
var container = $('.container'),
    image = container.find('img');

container.width(image.height());


//css    
.container {
    height: auto;
    overflow: hidden;
    border-radius: 50%;    
}

.image {
    height: 100%;    
    display: block;    
}
Dejan.S answered 2020-01-13T12:03:11Z
translate from https://stackoverflow.com:/questions/26421274/css-circular-cropping-of-rectangle-image