CSS aspect-ratio ve object-fit Kullanımı

Web'de görsellerin ve medya elemanlarının doğru boyutlandırılması her zaman zorlayıcı olmuştur. CSS aspect-ratio ve object-fit özellikleri, bu sorunu kökten çözen modern araçlardır. aspect-ratio ile herhangi bir elemanın en-boy oranını sabitlerken, object-fit ile içeriğin kutu içinde nasıl ölçekleneceğini kontrol edersiniz. Bu rehberde her iki özelliğin detaylı kullanımını ve yaygın tasarım pattern'lerini inceleyeceğiz.

1. aspect-ratio Temelleri

aspect-ratio özelliği, bir elemanın genişlik/yükseklik oranını tanımlar. Daha önce padding-top hack'i ile yapılan bu işlem, artık tek bir CSS satırıyla mümkündür. Bu özellik sadece img veya video için değil, herhangi bir HTML elemanı için kullanılabilir.

/* Temel aspect-ratio kullanımı */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.square-avatar {
  aspect-ratio: 1; /* 1/1 — kare */
  width: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.portrait-card {
  aspect-ratio: 3 / 4; /* Portre oranı */
  width: 100%;
}

/* Eski yöntem — padding-top hack (artık gerekli değil) */
.old-video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 9/16 = 0.5625 */
  height: 0;
}

.old-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern yöntem — çok daha temiz */
.modern-video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.modern-video-wrapper iframe {
  width: 100%;
  height: 100%;
}

/* Yaygın aspect ratio'lar */
.ratio-1x1    { aspect-ratio: 1; }       /* Kare: Instagram */
.ratio-4x3    { aspect-ratio: 4 / 3; }   /* Klasik TV */
.ratio-16x9   { aspect-ratio: 16 / 9; }  /* Widescreen */
.ratio-21x9   { aspect-ratio: 21 / 9; }  /* Ultra-wide */
.ratio-2x3    { aspect-ratio: 2 / 3; }   /* Portre fotoğraf */
.ratio-golden { aspect-ratio: 1.618 / 1; } /* Altın oran */

Bilgi: aspect-ratio özelliğinde hem genişlik hem yükseklik tanımlandığında (width + height), aspect-ratio göz ardı edilir. Sadece bir boyut tanımlandığında (width veya height), diğer boyut aspect-ratio'ya göre hesaplanır.

2. object-fit: İçerik Ölçeklendirme

object-fit özelliği, img, video ve diğer replaced element'lerin kutularına nasıl sığacağını kontrol eder. Görsellerin bozulmasını veya gereksiz kırpılmasını önlemek için kritik bir araçtır.

/* object-fit değerleri */

/* cover: Oranı koru, kutuyu doldur, gerekirse kırp */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center; /* Kırpma noktası */
}

/* contain: Oranı koru, tamamen göster, boşluk bırak */
.product-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: #f5f5f5; /* Boşlukları doldur */
}

/* fill: Oranı bozarak kutuyu doldur (varsayılan) */
.stretch-image {
  width: 100%;
  height: 200px;
  object-fit: fill; /* Görsel bozulabilir */
}

/* none: Orijinal boyutta, taşabilir */
.original-image {
  width: 200px;
  height: 200px;
  object-fit: none;
  overflow: hidden;
}

/* scale-down: contain veya none — hangisi daha küçükse */
.thumbnail {
  width: 150px;
  height: 150px;
  object-fit: scale-down;
}

/* object-position: Kırpma noktasını ayarla */
.hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center 30%; /* Yüzü göstermek için yukarı kaydır */
}

.product-bottom {
  object-fit: cover;
  object-position: bottom; /* Alt kısmı göster */
}

3. Gerçek Dünya Pattern'leri

aspect-ratio ve object-fit birlikte kullanıldığında, responsive ve tutarlı görsel düzenler oluşturmak kolaylaşır. İşte en yaygın kullanım senaryoları:

/* Responsive Card Grid — Eşit yükseklikte görseller */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card-grid .card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* Galeri Grid — Farklı oranlarla */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.gallery img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* Featured: büyük ve farklı oran */
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1;
}

/* Avatar Bileşeni */
.avatar {
  --size: 48px;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar--sm { --size: 32px; }
.avatar--md { --size: 48px; }
.avatar--lg { --size: 64px; }
.avatar--xl { --size: 96px; }

/* Background Image Alternatifi */
.hero-banner {
  aspect-ratio: 21 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
}

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

.hero-banner .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

İpucu: background-image yerine <img> + object-fit: cover kullanmayı tercih edin. Bu yöntem SEO için daha iyidir (alt text), lazy loading destekler (loading="lazy") ve erişilebilirlik açısından üstündür.

4. Responsive ve Adaptive Görseller

Farklı ekran boyutlarında farklı aspect-ratio'lar kullanarak, görsellerin her cihazda en iyi şekilde görünmesini sağlayabilirsiniz.

/* Responsive aspect-ratio */
.hero-image-container {
  width: 100%;
  overflow: hidden;
}

.hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobilde kare, tablette 4:3, masaüstünde 16:9 */
.hero-image-container {
  aspect-ratio: 1; /* Mobil: kare */
}

@media (min-width: 768px) {
  .hero-image-container {
    aspect-ratio: 4 / 3; /* Tablet */
  }
}

@media (min-width: 1024px) {
  .hero-image-container {
    aspect-ratio: 16 / 9; /* Masaüstü */
  }
}

/* Container query ile adaptive ratio */
.image-container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .image-container img {
    aspect-ratio: 16 / 9;
  }
}

@container (max-width: 599px) {
  .image-container img {
    aspect-ratio: 4 / 3;
  }
}

/* Skeleton Loading ile aspect-ratio */
.image-skeleton {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

Uyarı: aspect-ratio ile height: auto birlikte kullanıldığında, img elementinde yükleme sırasında layout shift oluşabilir. Bunu önlemek için HTML'de width ve height attribute'larını tanımlayın: <img width="800" height="450" ... >

Sonuç

CSS aspect-ratio ve object-fit özellikleri, modern web tasarımında görsel yönetiminin temel araçlarıdır. aspect-ratio ile padding-top hack'ine veda edin, object-fit ile görsellerin bozulmasını ve yanlış kırpılmasını engelleyin. Bu iki özelliği responsive tasarımla birleştirerek, farklı ekran boyutlarında tutarlı ve profesyonel görsel düzenler oluşturabilirsiniz. Layout shift'i önlemek için HTML attribute'larını kullanmayı ve erişilebilirlik için alt text'leri eklemeyi unutmayın.

CSS aspect-ratio ve object-fit Kullanımı