本文介绍了CSS圆形裁剪的矩形图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从矩形照片制作一个居中的圆形图像。
照片的尺寸是未知。通常它是一个矩形形式。
我尝试了很多方法:
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圆形裁剪的矩形图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!