object-fit CSS özelliği, bir <img> veya <video> gibi yerleştirme öğelerinin boyutlandırılmasını ve nasıl gösterileceğini kontrol eder. Bu özellik, öğenin boyutları ile onun içerdiği kutunun (genellikle bir div veya başka bir konteyner) boyutları arasındaki ilişkiyi yönetir. object-fit özelliği, özellikle responsive web tasarımında çok yararlıdır çünkü içeriğin farklı ekran boyutları ve oranlarına uyum sağlamasını sağlar.

Kullanılabilir Değerler:

fill: Öğenin içindeki kutuyu tamamen dolduracak şekilde boyutlandırır, bu da orijinal oranın bozulmasına neden olabilir.

contain: Öğenin tamamı görünür olacak şekilde oranı korunur ve gerektiğinde boşluklar oluşabilir.

cover: Öğenin içindeki kutuyu tamamen kaplayacak şekilde boyutlandırır ve orijinal öğenin bazı kısımları kırpılabilir.

none: Öğe orijinal boyutunda kalır ve boyutlandırma yapılmaz.

scale-down: none veya contain değerlerinden biri gibi davranır, öğeyi küçültür ancak orijinal boyutunu aşmaz.

object-fit özelliği, modern web tasarımında görsellerin ve videoların estetik bir şekilde sunulmasını sağlayan önemli bir araçtır. Bu özellik sayesinde, geliştiriciler ve tasarımcılar içeriklerini farklı cihazlarda ve ekran boyutlarında daha iyi kontrol edebilir ve kullanıcı deneyimini önemli ölçüde iyileştirebilirler.

object-position CSS özelliği, object-fit özelliği ile birlikte kullanıldığında, bir yerleştirme öğesinin (örneğin, <img> veya <video>) içerdiği kutu içindeki konumunu belirler. Bu özellik, özellikle object-fit özelliği cover, contain, scale-down, veya none olarak ayarlandığında yararlıdır ve yerleştirme öğesinin içindeki kutuya nasıl hizalandığını kontrol etmenizi sağlar.

object-position: <x-pos> <y-pos>;

<x-pos> ve <y-pos> değerleri, öğenin konumlandırılacağı x (yatay) ve y (dikey) pozisyonlarını belirtir. Bu değerler uzunluk birimleri (örn. px, em, % vb.) veya özel anahtar kelimeler (top, right, bottom, left, center) ile belirtilebilir.

TailwindCSS:

Object Fit:

Object Position: