イメージをスパンタグの円形ボックスに合わせるにはどうすればよいですか？

Question

私は円にする必要がありますか？事前にt​​hanxs

<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

あなたはボーダー半径プロパティを使用していることを行うことができます。私は以下の例を追加しました。

#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

使用border-radius CSSで

例：

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