Как обернуть изображение в круг
∘CSS 19.08.19 19.08.19 517
на главную сниппетов<![CDATA[
--------------------
.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.
<![CDATA[
--------------------
.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.
<![CDATA[
--------------------
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.
<![CDATA[
--------------------
Вариант с анимацией вращения картинок при наведении
Кнопка становится выпуклой за счёт добавления тени.
.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>
--------------------
]]>
на главную сниппетов
