Как сделать изображение подходящим в круглой коробке в теге span?

Question

Мне нужно сделать это в круг любой помощи, пожалуйста? thanxs заранее

<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

Используйте border-radius свойство в CSS:

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