带有边框半径的图像未填充 div

Question

我试图在 div 内渲染图像，它有弯曲的边框。我遇到了图像没有完全填满 div 的问题，尽管它们具有相同的边界半径和尺寸。

下面是我在 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>

这里是 css 类

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

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

这里是 link 实时 codesandbox 环境 link

Answer 1

您正在比较边框的外半径与图像的外半径。只有边框的内半径和图像的外半径应该相同。

边框的外半径 = 8px

边框内半径 = 图片外半径 = 8px - 边框宽度 = 7px

结果很完美。

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

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

Answer 2

不要使用容器元素为图像添加边框。只需将边框和半径直接应用于图像，如下所示：

.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"
/>

（我将尺寸放大了一点以便于查看。）

Answer 3

边框及其半径定义在元素的外侧。查看边框为 20px:

的夸张结果

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

结果（放大）：

解决此问题的方法：在子项（图像）而不是容器上设置边框。或者使用 outline 代替：

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

结果（放大）：

Answer 4

只需将您的 css 更改为以下内容即可完美运行：

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

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

Answer 5

我更喜欢将 overflow: hidden 应用于容器，除非某些 child 内容需要在容器外可见。当与边框半径一起使用时，它会屏蔽 child 溢出的部分：

.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>

注意： 确保删除任何 border-radius 设置为里面的图像。

带有边框半径的图像未填充 div

image with border radius does not fill the div

html

css

reactjs

border-radius