CSS圆形裁剪的矩形图像 [英] CSS Circular Cropping of Rectangle Image

问题描述

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

I want to make a centered circular image from rectangle photo. The photo's dimensions is unknown. Usually it's a rectangle form. I've tried a lot of methods:

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>

推荐答案

这种方法是错误的， code>到框 div 而不是实际图片。

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

这会奏效：

HTML

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

CSS

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

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

和工作小提琴

这篇关于CSS圆形裁剪的矩形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！