时间戳

首页 > 解决方案 > 具有边框半径的图像不填充 div

html - 具有边框半径的图像不填充 div

问题描述

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

这是实时代码框环境 链接的链接

标签： htmlcssreactjsborder-radius

解决方案

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

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

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

推荐阅读