如何用CSS使矩形图像呈现圆形

I've used border-radius: 50% or border-radius: 999em, but the problem is the same: with squared images there's no problem, but with rectangular images I obtain an oval circle. I'm also disposed to crop a part of the image (obviously). Is there's a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div> with a background-image, but only using the <img> tag?

我使用了边界半径:50%或者边界半径:999em，但是问题是一样的:对于平方的图像没有问题，但是对于矩形的图像，我得到了一个椭圆形的圆。我也倾向于裁剪图像的一部分(显然)。是否有一种方法可以在使用纯CSS(或者至少是JavaScript / jQuery)的情况下实现这一点，而不需要使用带有背景图像的

，而只使用

标记?

9 个解决方案

#1

I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline:

我假定您对背景图像的问题是，如果样式表中每个图像都有一个源，那么它的效率就会很低。我的建议是将源代码内联:

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle

小提琴

#2

My 2cents because the comments for the only answer are getting kinda crazy. This is what I normally do. For a circle, you need to start with a square. This code forces a square and will stretch the image. If you know that the image is going to be at least the width and height of the round div you can remove the img style rules for it to not be stretch but only cut off.

我的2分因为唯一答案的评论有点疯狂。这是我通常做的。对于一个圆，你需要从一个正方形开始。这段代码强制使用一个正方形并展开图像。如果你知道图像至少是圆形div的宽度和高度，你可以去掉img样式的规则，这样它就不会被拉伸，而是被切断。

<html>
    <head>
        <style>
            .round {
                border-radius: 50%;
                overflow: hidden;
                width: 150px;
                height: 150px;
            }
            .round img {
                display: block;
            /* Stretch 
                  height: 100%;
                  width: 100%; */
            min-width: 100%;
            min-height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="round">
            <img src="image.jpg" />
        </div>
    </body>
</html>

#3

For those who use Bootstrap 3, it has a great CSS class to do the job:

对于使用Bootstrap 3的用户，它有一个很棒的CSS类来完成这项工作:

<img src="..." class="img-circle">

#4

you can only make circle from square using border-radius.

你只能用边界半径从正方形变成圆形。

border-radius doesn't increase or reduce heights nor widths.

边界半径不增加或减少高度或宽度。

Your request is to use only image tag , it is basicly not possible if tag is not a square.

您的请求是只使用图像标记，如果标记不是正方形，基本上是不可能的。

If you want to use a blank image and set another in bg, it is going to be painfull , one background for each image to set.

如果你想要使用一个空白的图像并在bg中设置另一个，那么它将是充满颜料的，每个图像都要设置一个背景。

Cropping can only be done if a wrapper is there to do so. inthat case , you have many ways to do it

裁剪只能在有包装的情况下进行。在这种情况下，你有很多方法去做

#5

You can make it like that:

你可以这样写:

    <html>
<head>
    <style>
        .round {
            display:block;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            overflow: hidden;
            padding:5px 4px;
        }
        .round img {
            width: 45px;
        }
    </style>
</head>
<body>
    <div class="round">
        <img src="image.jpg" />
    </div>
</body>

#6

Building on the answer from @fzzle - to achieve a circle from a rectangle without defining a fixed height or width, the following will work. The padding-top:100% keeps a 1:1 ratio for the circle-cropper div. Set an inline background image, center it, and use background-size:cover to hide any excess.

以@fzzle的回答为基础——要在没有定义固定高度或宽度的情况下从一个矩形中得到一个圆，下面的方法将有效。划桨顶部:100%保持1:1的比例为圆环-cropper div。设置一个内联背景图像，居中，使用背景尺寸:覆盖以隐藏多余的部分。

CSS

.circle-cropper {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
}

HTML

<div class="circle-cropper" style="background-image:url(myrectangle.jpg);"></div>

#7

This one works well if you know height and width:

如果你知道高度和宽度的话，这个效果很好:

img {
  object-fit: cover;
  border-radius: '50%';
  width: 100px;
  height: 100px;
}

via https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

通过https://medium.com/@chrisnager center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

#8

I've been researching this very same problem and couldn't find a decent solution other than having the div with the image as background and the img tag inside of it with visibility none or something like this.

我一直在研究这个同样的问题，除了让div以图片为背景，img标签为背景，不可见或类似的东西，我找不到更好的解决方案。

One thing I might add is that you should add a background-size: cover to the div, so that your image fills the background by clipping it's excess.

我可能要补充的一点是，您应该向div添加一个背景大小:cover，以便您的图像通过剪切它的多余部分来填充背景。

#9

-2

<html>
    <head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
    .round_img {
    border-radius: 50%;
    max-width: 150px;
    border: 1px solid #ccc;
    }
    </style>
    <script>
    var cw = $('.round_img').width();
    $('.round_img').css({
    'height': cw + 'px'
    });
    </script>
    </head>
    <body>
    <img class="round_img" src="image.jpg" alt="" title="" />
    </body>
</html>

http://jsfiddle.net/suryakiran/1xqs4ztc/

#1