CSS Circle Image

CSS Circle Image

www.coding-dude.com coding-dude.com3 months ago in #Dev Love38

The circle image CSS problem: Images come in rectangle or square shape. You can always use a photo editor like Gimp or Photoshop to crop an image into a circle (if that’s what you want check out this automated action from PhotoshopSupply to Crop An Image Into Any Shape) or even use online tools like MockoFun to Crop Picture Into Circle Online. But this post is about how to make circular images using CSS. So, how do you make a circle image with CSS only? In this post I will show you how to use CSS to transform a rectangular or square image into a circular image. CSS Rounded Image Using border-radius The simplest solution to making a CSS circle image is to use border-radius. This is used to make rounded borders for HTML elements, so it also works for images. For this method to work on images of all size ratios (landscape, portrait or square) it’s necessary for the image to have a parent HTML element aka a wrapper. We will use a span element as the wrapper with circle-image CSS class name. Here’s the HTML code:   And the CSS for making the circular image: .circle-image{   display: inline-block;   border-radius: 50%;   overflow: hidden;   width: 50px;   height: 50px; } .circle-image img{ width:100%; height:100%; object-fit: cover; } That’s all the CSS code you need to display a HTML circle image! I used display:inline-block because span is by default inline and I need something that I can set sizes for. Setting the border-radius to 50% is actually what creates our CSS rounded image, because it rounds the corners with a radius of 50% (half) of the whole size of the image. For the img I just used 100% for the size to make sure that it fits snugly inside the wrapping element. The object-fit:cover  makes sure that the image ratio is maintained, so it’s not stretched. This approach is quite simple, but it’s not without inconveniences. For example, you have to input the size for the image. I put in 50px, but you will have to put in the size you need. CSS Circle Image Using background-image Basically, we use CSS to set our image on the background of a HTML element and we make the element round. This will display our circle image. Here’s the HTML code: Here’s the HTML code: and our circle image CSS code: .circle-image{ width: 50px; height: 50px; background-image: url(“http://www.coding-dude.com/your-image.jpg”); background-size: cover; display: block; border-radius:50%; } Done! If you need to position the image differently inside the circle, you can use the background-position CSS property to specify the left and top position, or the combinations of bottom|top|center|left|right. In most cases these solutions will be enough, but what if you need to make a responsive circle image with CSS? Responsive Circle Image CSS Whether we like it or not, responsive web design is an important requirement for websites. Let’s see what we need to change in our circle image CSS code above to make a responsive circular image. The HTML code stays the same, because we still need the wrapping element:   And the responsive circular image CSS code: .circle-image{ display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; } .circle-image img{ width:100%; height:100%; position: absolute; border-radius: 50%;  » Read More

Like to keep reading?

This article first appeared on coding-dude.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply