How to make rectangular image appear circular with 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?

回答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.

<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:

<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.

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

回答5:

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.

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" role="img" style="background-image:url(myrectangle.jpg);"></div>

回答6:

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>

回答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

回答8:

Following worked for me:

CSS

.round {
  border-radius: 50%;
  overflow: hidden;
  width: 30px;
  height: 30px;
  background: no-repeat 50%;
  object-fit: cover;
}
.round img {
   display: block;
   height: 100%;
   width: 100%;
}

HTML

<div class="round">
   <img src="test.png" />
</div>

回答9:

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.

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.

回答10:

<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/

来源：https://stackoverflow.com/questions/22577371/how-to-make-rectangular-image-appear-circular-with-css

标签

html

css

css-shapes