用 border-radius 适合 div 内的图像？

Question

想象一个 parent div 和一个圆角的 border-radius。有没有办法将 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 在底部具有圆角。我知道的唯一解决方法是让图像具有相同的 border-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/

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/

用 border-radius 适合 div 内的图像？

fit an image inside div with border-radius?

html

css

border-radius