Merhabalar,
Bu yazımda <img> etiketiyle eklenen bir görseli Css ile nasıl yuvarlak yapabiliriz bu konudan bahsedeceğim. Birçok tasarımda görebilirsiniz nasıl yapıldığını merak ediyorsanız gelin hemen başlayalım.
<img src="gorsel.jpg" alt="" class="yuvarlak" /> Html tarafında görseli ekledik. Şimdi sıra bunu Css tarafında özelleştirmeye;
img.yuvarlak {
border-radius: 50%;
} border-radius HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. yuvarlak class’ına sahip img etiketlerine border-radius özelliğini veriyoruz.
Tabii ki bu işlem .yuvarlak class’ına sahip tüm görselleri, görselin kendi boyutlarına göre yuvarlak yapacaktır. Ama genel olarak çoğu tasarımda sabit boyutlarda kullanıldığı için gerekli boyutları da resme eklediğiniz takdirde daha düzenli olarak görünecektir.
img.yuvarlak {
border-radius: 50%;
height: 250px;
width: 250px;
object-fit: cover;
}Sabit boyutlarımızı da görsellere ekledik. Sizde kendinize ait boyutları ayarlayabilirsiniz. Görsellere sabit boyut verdiğimizde görselin bozuk görünümü, sünmesini vb. engellemek için object-fit kullandım.
Codepen üzerinden size incelemeniz açısından bi örnek bırakayım;
See the Pen Yuvarlak Görsel by furkangiray.com (@furkangiray_com) on CodePen.
Evet bu kadar kısa bir işlemin ardından görsellerinizi yuvarlak olarak gösterebilirsiniz.
Umarım işinize yarar.
Mutlu Kodlamalar 🙂
