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

标签： htmlcssborder-radius

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/