矩形图像的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除外。

​

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

<img src="https://picsum.photos/200/300" 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>

​