Question

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

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>

Answer 1

方法错误，您需要将border-radius应用于容器div而不是实际图像。

这样可行：

＆＃13;

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

＆＃13;

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

＆＃13;

Answer 2

如果您没有<img>标签，我建议您将照片用作背景图片。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

object-fit属性提供了一种非hackish方式（以图像为中心）。它已在主流浏览器中支持了几年（自2013年以来的Chrome / Safari，自2015年以来的Firefox，以及2015年以来的Edge），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 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.

OR：

.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

约翰尼的解决方案很好。我发现添加最小宽度：100％，真的有助于图像填满整个圆圈。您可以使用JavaScript的组合来获得最佳效果，或者使用ImageMagick - http://www.imagemagick.org/script/index.php如果您真的认真对待它是正确的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

插入图像，然后反手完成所有操作：

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

**图片代码将自动显示在这里**

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>

参考

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>

如果您运行该代码段，您可以看到，对于水平矩形，我们添加了另一个类 .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;    
}

CSS矩形裁剪矩形图像

10 个答案:

参考