CSS矩形裁剪矩形图像

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而不是实际图像.

这可行:

.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="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

Answer 2

如果你可以没有<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 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

一个简单的单衬。

clip-path: circle();

Answer 5

试试这个:

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在这里.

要么:

.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在这里.