我正在用户个人资料中创建一个圆形头像,并打算在圆形头像容器中设置用户图像。
I am creating a round avatar in the user's profile and intend to set the user's image in the round avatar container.
如果图像是正方形,则不会成为问题
If the image is a square there will not be an issue
但是,例如,对于此非正方形图像,我无法约束非正方形图像
However, I was not able to constraint an image which is not a square image for example for this non-square image
我会得到此结果
这是我正在使用的CSS代码
This is the CSS code I am using
.avatar_container { display: inline-block; width: 25%; max-width: 110px; overflow: hidden; } .avatar_container img { border-radius: 50%; }我怎样做才能始终保持圆形头像?并且其中的图像不会失真吗?溢出应该被隐藏
What can I do to always maintain a round avatar? And that the image in it won't be distorted? overflow should be hidden
推荐答案更新:@grenoult使用CSS转换找到了一个很棒的解决方案链接。这比我以前的解决方案更好,因为它可以裁剪高而宽的图像。检出: jonathannicol/博客/ 2014/06/16 / centre-crop-thumbnails-with-css / 。
UPDATE: @grenoult found a link with a great solution using css transforms. This is nicer than my previous solution because it allows you to crop tall and wide images. Check it out: jonathannicol/blog/2014/06/16/centre-crop-thumbnails-with-css/.
旧答案:您想做什么是创建一个方形容器div并在其上放置边框半径。然后,调整图像大小以适合它。
OLD ANSWER: What you want to do is create a square container div and put the border-radius on that. Then, size the image to fit it.
HTML:
<div class="mask"> <img src="i.stack.imgur/MFao1.png" /> </div>CSS:
.mask { display: inline-block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; } img {max-width: 100%;}jsfiddle: jsfiddle/V2Xjy/
jsfiddle: jsfiddle/V2Xjy/
更多推荐
如何在圆形图像容器中维护非正方形图像的尺寸
发布评论