Html Question posted in
Some basic documentation can be found here.

Html – Border-radius Property Not Maintaining Circular Image Shape in CSS

I’m facing an issue with maintaining a circular shape for images on smaller screens using CSS. Here’s the problem I’m encountering:

I have a layout where I display images in a circular shape using the border-radius: 50%; CSS property. However, when I resize the screen to smaller breakpoints, the circular shape of the images gets distorted, and they no longer maintain a perfect circle.

I’ve tried setting the border-radius property to 50%, along with specifying the same values for max-width and max-height to maintain the aspect ratio. However, this approach doesn’t seem to work as expected on smaller screens.

I’m looking for a solution or workaround that will allow me to maintain a perfect circular shape for images across different screen sizes without distortion. Any insights or suggestions on how to achieve this would be greatly appreciated!

Currently if you try to resize to a smaller screen size it will remain with the same size.

Thank you in advance for your help!

Note: image size shouldn’t be bigger than 8rem

.figure {
  position: relative;
}

.figure img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
<figure class="figure">
  <img src="https://via.placeholder.com/400x300" alt="Placeholder Image">
</figure>
Tags:

2

Answers


  1. 0

    Whenever using a unit of measure (rem, px, %), its a best practice to continue using that. The reason it’s changing is because 50% is based on the screen or the parent container. So if the container shrinks, that unit will as well since it’s always 50% of it. So…you might as well make it 100% or in your case:

    { 
width: 80rem; 
height: 80rem; 
border-radius: 80rem; 
}
    Login or Signup to reply.
  2. 0

    If you use a combination of:

    • vmin for your width
    • aspect-ratio

    then you will always have a suitably sized circle, regardless of the size of the viewport.

    Working Example:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

figure img {
  display: block;
  width: 50vmin;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
    <figure class="figure">
  <img src="https://via.placeholder.com/400x300" alt="Placeholder Image">
</figure>

    Further Reading:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search