html - 用边界半径在 div 内放置图像？

Question

想象div一个圆角的父母border-radius。有没有办法让一个imgdiv 适合它，使其也符合圆形边框？

.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 底部有圆角。我知道的唯一解决方法是让图像具有相同的边框半径属性，但仅在前两个角上。我发现这是一个烦人的解决方法。

Answer 1

尝试使用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/

Answer 2

你可以试试这个。

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

Answer 3

另一种解决方法可能是使用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/