如何使图像适合span标签中的圆形框？

Question

我需要帮助它进入圈子吗？提前大于

<a href="#" data-toggle="modal" data-target="#myModal1"> 
    <span class="fa cherry-icon icon_1 i " style="font-size:40px;color:#ffffff;"> 
    <img width="154" height="154" src="<cms:show servic1_image/>" class="attachment-img-size-3 wp-post-image" /> 
</span> 
</a>

Answer 1

在CSS中使用border-radius属性：

.circle{
  border-radius: 100%;
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.circle img{
  width: 100px;
  height: 100px;
}

<div class="circle">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">
</div>

Answer 2

您可以使用 border-radius 属性执行此操作。我在下面添加了一个例子。

#circle{
  border-radius:50%;
  width:100px;
  height:100px;
  border:3px solid yellow;
  }

<img src="https://i.stack.imgur.com/SHUtK.jpg" id="circle">

Answer 3

在css中使用border-radius

示例：

.container {
  height: 100vh;
  width: 100%;
  background: #fff url('https://images.unsplash.com/photo-1459539235056-5045ca20e525?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=') center no-repeat;
}
.image-holder {
  width: 150px;
  margin: 0 auto;
  padding-top: calc(50vh - 75px);
}
.image-circle {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 1px solid yellow;
}

<div class="container">
  <div class="image-holder">
    <img class="image-circle" src="https://images.unsplash.com/photo-1472461936147-645e2f311a2b?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" alt="">
  </div>
</div>