How to make rectangular image appear circular with CSS
HtmlCssCss ShapesHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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;
}
Solution 2 - Html
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>
Solution 3 - Html
For those who use Bootstrap 3, it has a great CSS class to do the job:
<img src="..." class="img-circle">
Solution 4 - Html
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
Solution 5 - Html
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>
Solution 6 - Html
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>
Solution 7 - Html
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
Solution 8 - Html
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>
Solution 9 - Html
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.
Solution 10 - Html
<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>