aspect-ratio CSS özelliği, bir öğenin genişliğinin yüksekliğine olan oranını belirler. Bu özellik, özellikle medya öğeleri (gibi img, video) ve diğer kutu öğeleri için yanıt veren tasarımlar oluştururken kullanışlıdır. aspect-ratio özelliği, öğenin boyutlandırılması gerektiğinde genişlik ve yükseklik arasındaki oranın korunmasını sağlar, böylece öğenin orijinal orantıları bozulmadan esnek bir şekilde yanıt verebilir.

aspect-ratio özelliği genişlik / yükseklik formatında belirtilir. Örneğin, aspect-ratio: 16 / 9; ifadesi, öğenin genişliğinin yüksekliğine oranının 16:9 olduğunu belirtir. Bu, genellikle video ve diğer geniş ekran medya öğeleri için kullanılan bir orandır.

Örnek Kullanım:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: black;
}

Bu örnekte, .video-container sınıfına sahip bir öğe için aspect-ratio 16:9 olarak belirlenmiştir. Bu, öğenin genişliği ne olursa olsun (bu durumda %100 genişlikte olacak şekilde ayarlanmıştır), yüksekliğinin otomatik olarak genişliğe göre orantılı bir şekilde ayarlanacağı anlamına gelir. Bu, video veya görüntü içeren konteynerler için idealdir, çünkü medyanın orijinal oranlarını bozmadan farklı ekran boyutlarına uyum sağlamasını sağlar.

aspect-ratio özelliği modern web tasarımında önemli bir rol oynar, çünkü esnek ve yanıt veren düzenler oluşturmayı kolaylaştırır ve medya öğelerinin çeşitli ekran boyutlarında doğru şekilde görüntülenmesini sağlar.

TailwinCSS: