image with border radius does not fill the div

user_10035797 0
Viewed 378

I was trying to render an image inside a div which has curved borders. I am experiencing an issue where the image does not completely fill the div, despite both having the same border radius and dimensions.

output

Here is how i am rendering the image inside the div

<div className={"container"}>
    <img
      alt={"thumb"}
      className={"img"}
      src={
        "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
      }
    />
  </div>

and here are the css classes

.container {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  border: 1px solid grey;
}

.img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
}

Here is the link to a live codesandbox environment link

border-radius reactjs css html
5 Answers

I prefer to apply overflow: hidden to the container, unless some child content needs to be visible outside of the container. When used with a border radius it masks off the parts of the child that overflow:

.container {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  border: 1px solid grey;
  overflow: hidden;
  
/*  just to make it bigger  */
  transform: scale(15);
  transform-origin: top left;
}

.img {
  height: 32px;
  width: 32px;
}
<div class="container">
    <img
        alt="thumb"
        class="img"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
    />
</div>

Note: Make sure you remove any border-radius set to the image inside.

user_142008630

Do not use a container element to add borders to images. Just apply the border and radius directly to the image, like so:

.img {
  width: 128px;
  height: 128px;
  border-radius: 32px;
  border: 4px solid grey;
}
<img
    alt="thumb"
    class="img"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
/>

(I scaled the sizes up a bit to make it easier to see.)

user_67196720

A border and it's radius is defined on the outside of the element. See the exaggerated result with a border of 20px:

.container {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    border: 20px solid gray;
}

Result (zoomed in):

example border

What you can do to fix this: either set the border on the child (the image) instead of the container. Or use outline instead:

.container {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    outline: 20px solid gray;
}

Result (zoomed in):

outline example

user_92301540

Just change your css to following and will work perfectly:

 .container {
    height: 32px;
    width: 32px;
    border-radius: 9px;
    border: 1px solid grey;
 }

 .img {
    height: 32.1px;
    width: 32.1px;
    border-radius: 8px;
    padding: 0;
 }
user_137407510

You are comparing the outer radius of the border to the outer radius of the image. Only the inner radius of the border and the outer radius of the image should be the same.

Outer radius of border = 8px

Inner radius of border = outer radius of image = 8px - border width = 7px

It came out perfectly.

enter image description here

.container {
  height: 320px;
  width: 320px;
  border-radius: 50px;
  border: 10px solid grey;
}

.img {
  height: 320px;
  width: 320px;
  border-radius:40px;
}
user_121318060
Related