Merhaba dostlar, Siberdefter‘e hoş geldiniz. Bugün CSS Dersleri‘nde “object-fit” teriminden bahsediyor olacağız. CSS’te object-fit nedir, CSS’te object-fit kullanımı, CSS “object-fit” ne işe yarar? Bu sorulara yanıt bulacaksınız.
Öncelikle biraz İngilizce’ye sahipseniz bu niteliğin neye yaradığını okuyarak anlarsınız. “object-fit” bir objeyi orantılamak için kullandığımız niteliktir. Genellikle resimlerde kullandığımız bu nitelik iki değer ile çalışır.
- Birinci seçenek; object-fit: cover;
- İkinci seçenek; object-fit: contain;
Cover dediğimiz zaman görsel belirlediğimiz alana sığdırılır, bu bağlamda görselimize biraz yakınlaştırma eklenmiş olacak. Örnek vermem gerekirse; 400×200 değerlerine sahip bir alana 120×159 değerlerine sahip bir görsel yerleştireceğiz.
object-fit: cover;Bu kullanımı yaptığımız zaman görselin genişliği 400px, yüksekliği ise 200px olacak ve alana sığdırılacak. Genelde “cover” değerini kullanırız ve daha iyi bir görünüm elde ederiz.
object-fit: contain;Bu kullanımı yaptığımız zaman ise görsel ortalanır. Yüksekliğinde veya genişliğinde herhangi bir değişim yaşanmaz.
