CSS ile Görseli Yuvarlak Yapmak

Merhabalar,

Bu yazımda <img> etiketiyle eklenen bir görseli CSS ile nasıl yuvarlak yapabiliriz konusundan bahsedeceğim. Birçok tasarımda karşınıza çıkmış olabilir. Nasıl yapıldığını merak ediyorsanız, gelin hemen başlayalım.

HTML Kodu:

<img src="gorsel.jpg" alt="" class="yuvarlak">

HTML tarafında görseli ekledik. Şimdi CSS ile özelleştirme yapalım:

img.yuvarlak {
  border-radius: 50%;
}

border-radius özelliği, HTML öğelerine yuvarlak kenar vermek için kullanılır. Burada .yuvarlak sınıfına sahip img etiketlerine bu özelliği vererek görseli dairesel hale getiriyoruz.

Ancak görsellerin düzgün görünmesi için sabit boyutlar tanımlamak daha sağlıklı olacaktır. Aşağıdaki gibi:

img.yuvarlak {
  border-radius: 50%;
  height: 250px;
  width: 250px;
  object-fit: cover;
}

Burada object-fit: cover kullanarak görselin orantılı şekilde kırpılmasını sağlıyoruz. Bu, görselin bozulmasını veya esnemesini önler.

Detaylı örnek için CodePen üzerinden inceleyebilirsiniz:

CodePen'de Yuvarlak Görsel Örneği

Bu kadar kısa bir işlemle görsellerinizi estetik bir şekilde dairesel hale getirebilirsiniz.

Umarım işinize yarar.

Mutlu Kodlamalar! :)