CSS ile Fotoğrafı Daire Yapmak

Bu yazıda, CSS kullanarak fotoğraflarımızı daire şeklinde nasıl gösterebileceğimizi öğreneceğiz.

CSS ile fotoğraflarımızı daire ( circle image ) şeklinde göstermek oldukça kolaydır. border-radius, width, height gibi basit CSS özelliklerini kullanarak farklı boyutlarda, kenarlıklı daireler oluşturabilirsiniz.

Bunu en basitçe yapmak için “img” etiketine ihtiyacımız var. Bu etikete basitçe genişlik, yükseklik ve kenarlık yuvarlama oranı yazmamız yeterli.

Aşağıda basit bir örnek paylaştım, kodları inceleyebilirsiniz. Çalışan örneğini şurada görebilirsiniz. CSS Circle Image (codepen.io)

HTML

<img src="https://serdarkaraca.com.tr/serdarkaraca.jpg" class="cover">

CSS

.cover{
    width: 150px;
    height: 150px;
    border-radius: 50%;
}