如何在圆形图像容器中维护非正方形图像的尺寸 [英] How to maintain dimension of non-square image in a round image container

问题描述

我正在用户个人资料中创建一个圆形头像，并打算在圆形头像容器中设置用户图像。

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转换找到了一个很棒的解决方案链接。这比我以前的解决方案更好，因为它可以裁剪高而宽的图像。检出： http://jonathannicol.com/博客/ 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: http://jonathannicol.com/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="http://i.stack.imgur.com/MFao1.png" />
</div>​

CSS：

.mask {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

img {max-width: 100%;}

jsfiddle： http://jsfiddle.net/V2Xjy/

jsfiddle: http://jsfiddle.net/V2Xjy/

这篇关于如何在圆形图像容器中维护非正方形图像的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！