如何解决用边框半径在 div 内拟合图像?
想象一个带有圆角 div
的父 border-radius
。有没有办法在 div 内放置一个 img
以便它也符合圆形边框?
.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 底部有圆角。我知道的唯一解决方法是让图像具有相同的边框半径属性,但仅在顶部两个角上。我发现这是一个令人讨厌的解决方法。
解决方法
尝试使用 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/
,你可以试试这个。
.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>
另一种解决方法可能是使用 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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。