Как обернуть изображение в круг?

106

24 мая 2021, 08:20

Обернуть изображение в круг, я пытался сделать это с помощью padding'а, после чего добавив обыкновенные границы, но это портит изображение по углам.

Answer 1

.circle { 
  width: 100px; 
  height: 100px; 
  border: 1px solid black; 
  border-radius: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

<div class="circle"> 
  <img src="https://picsum.photos/50/50" alt=""> 
</div>

Answer 2

.block { 
  width: 150px; 
  height: 150px; 
  text-align: center; 
} 
 
img { 
  padding: 10px; 
  border: 1px solid #000; 
  border-radius: 50%; 
}

<div class="block"> 
  <img src="https://www.placecage.com/120/120" alt="image"> 
</div>

Не очень понял, что именно у тебя не вышло. Но по твоему описанию, у меня получилось

Answer 3

SVG mask

Как вариант решения, применение SVG mask для вырезания круглого изображения. Применение маски дает возможность более интересно сделать границу полупрозрачной.
Применение SVG делает изображение полностью адаптивным к любому размеру гаджета.

Работает во всех современных браузерах включая IE11, Edge

Вариант с анимацией не работает в IE11, Edge.

.simpson { 
background: rgb(238,174,202); 
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%); 
} 
svg { 
width:100%; 
height:100%; 
} 
.container { 
width:25%; 
height:25%; 
display: inline-block; 
}

<div class="simpson"> 
  
 <div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 230 230" preserveAspectRatio="xMinYMin meet"> 
 <defs> 
    
  <mask id="msk1">  
    <rect width="100%" height="100%" fill="black" /> 
   <circle cx="110" cy="110" r="100" fill="white" stroke-width="15" stroke="grey"  /> 
  </mask> 
</defs> 
   
 
<image id="img" xlink:href="https://i.stack.imgur.com/vN9Ni.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
</svg>	  
</div>  
<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 230 230" preserveAspectRatio="xMinYMin meet"> 
 <defs> 
    
  <mask id="msk1">  
    <rect width="100%" height="100%" fill="black" /> 
   <circle cx="110" cy="110" r="100" fill="white" stroke-width="15" stroke="grey"  /> 
  </mask> 
 
 </defs>  
 
<image id="img" xlink:href="https://i.stack.imgur.com/96s42.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
</svg>	  
</div> 
</div>

Вариант с анимацией вращения картинок при наведении

Кнопка становится выпуклой за счёт добавления тени.

.simpson { 
background: rgb(238,174,202); 
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%); 
} 
.container { 
width:25%; 
height:25%; 
display: inline-block; 
 
} 
svg { 
width:100%; 
height:100%; 
  
} 
svg:hover { 
filter:drop-shadow(2px 4px 7px black) ; 
} 
#img { 
transform-origin:110px 110px; 
  -webkit-transition: -webkit-transform 1s ease-in-out; 
          transition:         transform 1s ease-in-out; 
} 
 
#img:hover { 
  -webkit-transform: rotate(360deg); 
          transform: rotate(360deg); 
		   
}

<div class="simpson"> 
  
 <div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 230 230" preserveAspectRatio="xMinYMin meet"> 
 <defs> 
    
  <mask id="msk1">  
    <rect width="100%" height="100%" fill="black" /> 
   <circle cx="110" cy="110" r="100" fill="white" stroke-width="7" stroke="grey"  /> 
  </mask> 
</defs> 
   
 
<image id="img" xlink:href="https://i.stack.imgur.com/vN9Ni.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
</svg>	  
</div>  
 
 <div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 230 230" preserveAspectRatio="xMinYMin meet"> 
 <defs> 
    
  <mask id="msk1">  
    <rect width="100%" height="100%" fill="black" /> 
   <circle cx="110" cy="110" r="100" fill="white" stroke-width="10" stroke="grey"  /> 
  </mask> 
</defs> 
   
 
<image id="img" x="-15px" y="-15px" xlink:href="https://i.stack.imgur.com/kTW7g.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
</svg>	  
</div>  
<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 230 230" preserveAspectRatio="xMinYMin meet"> 
 <defs> 
    
  <mask id="msk1">  
    <rect width="100%" height="100%" fill="black" /> 
   <circle cx="110" cy="110" r="100" fill="white" stroke-width="10" stroke="grey"  /> 
  </mask> 
 
 </defs>  
 
<image id="img" xlink:href="https://i.stack.imgur.com/96s42.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
</svg>	  
</div> 
</div>