Menu
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?
628
Cropping image to a circle We can crop an image to a circle by adding a border-radius property with value 50% to the square image. Similarly, we can crop background-image to circle by adding border-radius value to 50% .
The main CSS property responsible for the circular shape is the border-radius property. Setting the radius of the corners to 50% of the width/height results in a circle.
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
113
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
