矩形图像的 CSS 圆形裁剪

Question

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

代码

.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%;  
}

<div class="image-cropper">
   <img src="https://sf1.autojournal.fr/wp-content/uploads/autojournal/2012/07/4503003e3c38bc818d635f5a52330d.jpg" class="rounded" />
</div>

Answer 1

方法不对，需要将border-radius应用到容器div，而不是实际的镜像。

这可行：

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Answer 2

object-fit 属性提供了一种非骇客的方式来执行此操作（图像居中）。几年来，主流浏览器都支持它（Chrome/Safari 自 2013 年以来，Firefox 自 2015 年以来，Edge 自 2015 年以来），但 Internet Explorer 除外。

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

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

Answer 3

如果你可以不用<img>标签，我建议你使用这张照片作为背景图片。

.cropcircle{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: #eee no-repeat center;
    background-size: cover;
}

#image1{
    background-image: url(http://www.voont.com/files/images/edit/7-ridiculous-ways-boost-self-esteem/happy.jpg);
}

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

Answer 4

试试这个：

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

DEMO here.

或者：

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

DEMO here.

Answer 5

Johnny 的解决方案很好。我发现添加 min-width:100% 确实有助于图像填满整个圆圈。你可以结合使用 JavaScript 来获得最佳结果，或者使用 ImageMagick - http://www.imagemagick.org/script/index.php 如果你真的很想把它做好的话。

.image-cropper {

  width: 35px;

  height: 35px;

  position: relative;

  overflow: hidden;

  border-radius: 50%;

}

.image-cropper__image {

  display: inline;

  margin: 0 auto;

  height: 100%;

  min-width: 100%;

}

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

Answer 6

一个简单的班轮。

clip-path: circle();

Answer 7

我知道上面提到的很多解决方案都可以，你也可以试试 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 类时很有帮助。

Answer 8

我能够做到这一点的最好方法是使用新的 css object-fit (1) 属性和 padding-bottom (2) hack。

您需要一个围绕图像的包装元素。你可以使用任何你想要的东西，但我喜欢使用新的 HTML picture 标签。

.rounded {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* These classes just used for demo */
.w25 {
  width: 25%;
}

.w50 {
  width: 50%;
}

<div class="w25">
<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>
</div>

<!-- example using a div -->
<div class="w50">
<div class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</div>
</div>

<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>

参考文献

1. CSS Image size, how to fill, not stretch?

2. Maintain the aspect ratio of a div with CSS

Answer 9

接受的答案可能适用于某些情况，但这取决于矩形和任何预定样式的比例。

我使用这种方法是因为它比仅使用object-fit 的解决方案更兼容：

.image-cropper {
   width: 150px;
   height: 150px;
   position: relative;
   overflow: hidden;
   border-radius: 50%;
   border:2px solid #f00;
}

/* Common img styles in web dev environments */
img {
   height: auto;
   max-width: 100%;
}

/* Center image inside of parent */
img.center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* For horizontal rectangles */
img.horizontal {
   height: 100%;
   width: auto;
   max-width: 9999px; /* max-content fall back */
   max-width: max-content;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/300x600" class="center" />
</div>

<div class="image-cropper">
  <img src="https://via.placeholder.com/600x300" class="horizontal center" />
</div>

如果你运行 sn-p 你可以看到，对于水平矩形，我们添加了另一个类.horizontal。

我们覆盖 max-width 以允许 img 大于 100% 的宽度。这样可以保留纵横比，防止图像被拉伸。

但是，图像不会居中，这就是 .centered 类的用武之地。它使用了一个很好的居中技巧来将图像在垂直和水平方向上绝对定位在中心。

More information on the centering at CSS Tricks

您很可能并不总是知道图像的比例，所以这就是为什么我建议使用 javascript 来定位 img 并在需要时添加 .horizontal 类。

Here is a stack overflow answer that would work

Answer 10

您需要使用 jQuery 来执行此操作。这种方法使您能够拥有动态图像，并且无论大小如何，都可以进行圆形处理。

我的演示现在有一个缺陷，我没有将容器中的图像居中，但我会在一分钟内返回它（需要完成我正在处理的脚本）。

DEMO

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

Answer 11

插入图片，然后反手你只需要：

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

**图片代码会自动出现在这里**