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

19.08.19 18:32:00 19.08.19 20:07:04 15

*Источник: https://ru.stackoverflow.com/questions/1011661/Как-обернуть-изображение-в-круг

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

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

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

4.

-------------------- Вариант с анимацией вращения картинок при наведении Кнопка становится выпуклой за счёт добавления тени. .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> --------------------