是否在div内使用边界半径拟合图像？
是否在div内使用边界半径拟合图像？
提问于 2021-04-01 10:06:55
想象一下具有四舍五入的border-radius的父div。有没有一种方法可以将img放入div中，使其也符合圆角边框？
.parent-div {
background-color: gray;
border-radius: 20px;
}
.image {
width: 100%
}<div class="parent-div">
<img class="image" src="/a-cool-image">
<p>Some text</p>
</div>
这只会产生一个带有方角的图像，而div在底部有圆角。我所知道的唯一解决办法是让图像具有相同的边界半径属性，但仅在顶部的两个角上。我发现这是一个恼人的变通办法。
回答 3
Stack Overflow用户
发布于 2021-04-01 10:09:11
正在尝试使用overflow https://www.w3schools.com/cssref/pr_pos_overflow.asp
.parent-div {
background-color: gray;
border-radius: 20px;
overflow: hidden;
}下面是一个有效的示例来展示我的建议：https://jsfiddle.net/4mbzpfu2/3/
Stack Overflow用户
发布于 2021-04-01 10:24:19
你可以试试这个。
.parent-div img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}
.image {
width: 100%
}<div class="parent-div">
<img class="image" src="https://www.w3schools.com/howto/img_avatar.png">
<p>Some text</p>
</div>
Stack Overflow用户
发布于 2021-04-01 10:24:45
另一种解决方法可能是使用CSS。
img.yourclass {
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}查看此网站以生成CSS代码：https://border-radius.com/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66897555
复制相关文章
相似问题
腾讯云开发者
