Görseli şekle göre kırpma: daire, yuvarlatılmış köşeler ve şekiller

Kerem Aydın·10 Temmuz 2026·⏱2 dk

Bir görseli ekleyip onu bir şekle göre (daire veya yuvarlatılmış köşeler) kırpmak için çoğu zaman overflow: hidden içeren bir kapsayıcı + object-fit: cover uygulanmış görsel kombinasyonu yeterlidir. Standart dışı şekiller için clip-path kullanın.

Eğer bozulma olmadan mükemmel bir daire istiyorsanız — daireyi kapsayıcı ile oluşturun, doğrudan görselin kendisiyle değil.

İçindekiler

Görsel ekleme ve temel duyarlılık

Minimal ekleme:

<img src="images/photo.jpg" alt="Görsel açıklaması">

Görselin düzeni bozmaması ve altında “ince çizgi” olmaması için:

img{
  max-width: 100%;
  height: auto;
  display: block;
}

“Oval” olmayan dairesel görsel (avatar)

En kararlı yaklaşım — daireyi kapsayıcı belirler:

<div class="avatar">
  <img src="images/avatar.jpg" alt="Avatar">
</div>

.avatar{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* daireyi doldur, fazlalığı kırp */
  object-position: 50% 50%; /* kareyi kaydırabilirsiniz */
}

Eğer <img> üzerine eşit width ve height olmadan border-radius: 50% uygularsanız, daire yerine oval elde edersiniz.

Yuvarlatılmış köşeler: 2 güvenilir yöntem

Yöntem 1 — hızlı (kırpma gerekmiyorsa):

.photo{
  border-radius: 16px;
}

Yöntem 2 — “kartlardaki gibi” (yuvarlatma + düzgün kırpma):

<div class="thumb">
  <img src="images/product.jpg" alt="Ürün">
</div>

.thumb{
  width: 360px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover, “beyaz boşlukları” ortadan kaldırır: görsel alanı doldurur ve taşan kısımlar kırpılır. Görselin tamamını göstermek önemliyse object-fit: contain kullanın, ancak boşluklar oluşabilir.

Şekle göre kırpma: clip-path

clip-path, yuvarlatmadan daha karmaşık bir şekil gerektiğinde kullanışlıdır: elmas, altıgen, “kesik” köşeler.

clip-path ile daire:

.shape-circle{
  clip-path: circle(50% at 50% 50%);
}

inset ile yuvarlatılmış dikdörtgen:

.shape-rounded{
  clip-path: inset(0 round 18px);
}

Altıgen:

.shape-hex{
  clip-path: polygon(
    25% 6%, 75% 6%,
    100% 50%,
    75% 94%, 25% 94%,
    0% 50%
  );
}

clip-path, görüntüleme alanını “keser”, ancak süper hassas tasarımcı konturları için her zaman uygun değildir. Rastgele bir şekil (dalga, leke, karmaşık kontur) gerekiyorsa — çoğunlukla SVG maskesi/clipPath kullanılır.

Sık yapılan hatalar

  • Görselin altında ince bir çizgi belirdi → img { display: block; } ekleyin.
  • Dairedeki görsel “ezildi” → width ve height belirleyin ve object-fit: cover kullanın.
  • Köşeler yuvarlatıldı ama görsel “taşıyor” → kapsayıcıyı yuvarlatın ve overflow: hidden uygulayın.
  • Kırpma gerekiyor (yüz/nesne ortada değil) → object-position: 50% 20% (veya başka değerler) ayarlayın.

SSS

Kapsayıcı olmadan daire yapılabilir mi?
Evet, ancak yalnızca <img> için width ve height eşitse (ve tercihen object-fit: cover kullanılırsa).

Hangisini seçmeli: border-radius mi yoksa clip-path mi?
Daire ve yuvarlatma için — border-radius. Çokgenler ve standart dışı şekiller için — clip-path.

Neden <img> üzerindeki border-radius bazen “kirli” görünür?
Çoğu zaman sorun, görselin kapsayıcıya göre kırpılmaması veya gerilmesinden kaynaklanır. Daha güvenilir çözüm: kapsayıcı + overflow: hidden + object-fit: cover.