html - 倒 Angular/圆 Angular 图像 HTML

Question

我有一张图片，我正在查看用 HTML 创建的小型网站的基本定制。

我知道您可以对图像进行倒 Angular 处理，如 this question here 中所示，这给出了 45 度切割。

我希望每个 Angular 都有更圆润的倒 Angular ？ (我相信它叫做圆 Angular ，但我不能 100% 确定术语是否正确。

如第二张图所示:

使用 border-radius: 16px 16px 16px 16px; 通过将它放在 img 类中来工作，但我不希望所有图像都受到影响。

我需要做什么才能只允许对选定的图像进行倒 Angular ？

我试过了，但是没用:

.img-chamfer {
    border-radius: 16px 16px 16px 16px;
}

<div class="img-chamfer"> 
    <img src="Test.png" >
</div>

我的确切代码可以在这里找到:https://jsfiddle.net/netazv40/

.main {
  color:#29abe2;
  text-align: center
}
  
.img-wrapper {
  display: inline-block;
}

.img-wrapperPadding {
  display: block;
  margin: 0 auto 32px;
}
  
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div class="main">
    <div class="img-wrapper">
        <div class="img-wrapperPadding">
            <img src="http://placehold.it/350x208" width="350" height="208"><br/>
            <img src="http://placehold.it/100x50" width="100" height="50">
        </div>
    </div>
    <div class="img-wrapper">
        <div class="img-wrapperPadding">
            <img src="http://placehold.it/350x208" width="350" height="208"><br/>
            <img src="http://placehold.it/100x50" width="100" height="50">
        </div>
     </div>
</div>

我只需要对较大的图像进行影响/倒 Angular 。

Answer 1

提供 fiddle 后的解决方案

您可以使用以下 CSS 规则:

.img-wrapperPadding img[width="350"] {
    border-radius:16px;
}

Demo: https://jsfiddle.net/netazv40/3/

...或者给你的图像添加一个类，然后像下面这样解决它:

.rborder {
  border-radius:16px;
}

<img class="rborder" src="http://placehold.it/100x100"/>

Demo: https://jsfiddle.net/netazv40/1/

解决方案 #1(使用 flexbox):

.img-chamfer {
  border-radius:16px;
  display:inline-flex;
  overflow:hidden;
}

<div class="img-chamfer">
  <img src="http://placehold.it/100x100">
</div>

解决方案 #2(使用 inline-block):

.img-chamfer {
  border-radius:16px;
  display :inline-block;
  overflow:hidden;
  font-size:0;
}

<div class="img-chamfer">
  <img src="http://placehold.it/100x100">
</div>