Merhabalar,

Bu yazımda CSS'de çok bilinmeyen ama oldukça işe yaradığını düşündüğüm object-fit özelliğinden bahsedeceğim.

İlk defa duyanlar için tanımlayacak olursak; object-fit özelliği, bir medya öğesinin (özellikle <img>) verilen yükseklik ve genişliğe nasıl tepki vereceğini tanımlar.

Bu özellik sayesinde öğenin kırpılması, sığdırılması, kapsaması gibi işlemler üzerinde tam kontrol sahibi olabiliriz. Özellikle responsive tasarımlarda büyük kolaylık sağlar.

Bir medya öğesinin (örneğin görsel) kapsayıcı alana nasıl yerleşeceğini aşağıdaki seçeneklerle belirleyebiliriz:

• cover – alanı tam kaplayacak şekilde kırparak yerleştirir
• contain – öğeyi oranlarını bozmadan sığdırır
• fill – alanı tam doldurur ama oranları bozabilir
• none – herhangi bir ölçekleme yapmaz
• scale-down – none ve contain arasındaki küçük olanı uygular

Daha önce benzer görsel yerleşim işlemleri için background-size ve background-position gibi arka plan özellikleri kullanıyorduk. Artık görselleri doğrudan <img> etiketiyle eklediğimizde de object-fit ve object-position ile konumlandırabiliyoruz.

Uygulamalı örnekler görmek isterseniz aşağıdaki CodePen bağlantısını inceleyebilirsiniz:

CSS object-fit Kullanım Örnekleri – CodePen

Sitenize eklediğiniz görsellerin boyutlarını daha iyi yönetmek için object-fit özelliğini mutlaka öğrenmenizi ve kullanmanızı öneririm.

Umarım işinize yaramıştır.

Mutlu Kodlamalar! :)