用边框半径在 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/