Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialManu Febie
3,027 PointsRounded images css
For a project im working on, user are able to upload profile pictures. The images needs to be roundend and my css for it works, only for images that are of equal width and height. My question is how can I get all sort of images, no matter what their height or width is to be rounded perfectly?
Below you can see the css I applied. The .profile-img selects the figure and .rounded-img selects the img itself.
.profile-img { max-width: 150px; max-height: 150px; margin: 0 auto; }
.rounded-img { width: 100%; height: auto; border-radius: 50% 50%; overflow: hidden; }
3 Answers
Jonathan Rhodes
8,086 PointsInstead of trying to manipulate the image specifically, put it into a rounded container. You can set your max-width, max-height, border-radius, and hidden rules to the container, and the image inside will be forced to conform. You should not need to style the image at all.
Steven Parker
229,204 PointsRounded container, positioned image.
I was thinking the same thing as Jonathan, but I was wondering what you wanted to do with the image itself. You could squeeze it to make the height and width the same. In that case, just set width and height to specific pixel dimensions.
But if you don't want to alter the aspect ratio, you could use relative (or absolute) positioning to place the portion of the image you want displayed in the round window.
Manu Febie
3,027 PointsThanks a lot Steven, this immediately worked for me!
Evgeniia Mas
4,452 PointsAdditionally to our discussion: here at Treehouse in the LIbrary (part CSS) you can find video about using new features and masking . You can use clip-path or mask from CSS which are like masking tools in Adobe Photoshop.
img.round {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
Or another variant with mask
img.round {
mask: url(YourRoundMask.svg) top left / cover;
}
But be very careful with browser support.