我试图在具有弯曲边框的 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
答案 0 :(得分:2)
我更喜欢将 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
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>
注意:请确保删除设置为内部图像的所有边框半径。
答案 1 :(得分:1)
不要使用容器元素为图像添加边框。只需将边框和半径直接应用于图像,如下所示:
.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"
/>
(我将尺寸放大了一点,以便于查看。)
答案 2 :(得分:0)
边框及其半径定义在元素的外部。查看带有 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;
}
结果(放大):
答案 3 :(得分:0)
只需将您的 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;
}
答案 4 :(得分:-1)