具有边框半径的图像不填充 div [重复]

Posted 2023-03-28

【中文标题】具有边框半径的图像不填充 div [重复]

【英文标题】：image with border radius does not fill the div [duplicate]

【发布时间】：2021-09-17 07:58:05

【问题描述】：

我试图在具有弯曲边框的 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

【参考方案1】：

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

.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
        
        class="img"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
    />
</div>

注意：确保您删除了为内部图像设置的任何边框半径。

【参考方案2】：

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

.img 
  width: 128px;
  height: 128px;
  border-radius: 32px;
  border: 4px solid grey;

<img
    
    class="img"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/300px-Gull_portrait_ca_usa.jpg"
/>

（我把尺寸放大了一点，以便更容易看到。）

【参考方案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;

结果（放大）：

【讨论】：

使用轮廓代替边框效果很好

【参考方案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;
 

【参考方案5】：

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

边框外半径 = 8px

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

结果很完美。

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


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