Object-fit in CSS ka use images ya videos ko resize karne ke liye hota hai taaki wo apne container ke andar properly fit ho jaye without breaking layout.
Yeh mostly <img> aur <video> elements ke saath use hota hai.
Object-fit in CSS ke values
1. fill (default)
- Aspect ratio maintain nahi hota
- Image stretch ya squeeze ho sakti hai
2. cover
- Aspect ratio maintain hota hai
- Container full fill hota hai
- Extra part cut ho jata hai
3. contain
- Aspect ratio maintain hota hai
- Image pura visible hota hai
- Empty space aa sakta hai
4. none
- Image resize nahi hoti
5. scale-down
- Image smallest version choose karti hai between none aur contain
Object-fit in CSS ka practical example
Object-position in CSS
Object-position in CSS ka use image ya video ke visible part ko control karne ke liye hota hai.
Yeh mostly object-fit: cover ke saath use hota hai.
Object-position in CSS ka use
- X-axis → horizontal position
- Y-axis → vertical position
Values ho sakti hai:
- left, center, right
- px, %
- negative values bhi
Object-position in CSS example
Yaha image ka focus bottom-right side pe shift ho raha hai.
Another example
Yaha image ka focus thoda left-center pe hai.
Important
- object-fit decide karta hai image ka size/fit
- object-position decide karta hai image ka visible part
Object-fit in CSS ek important property hai jo images ko properly resize karta hai without breaking layout, aur object-position ke saath use karke tum exact visible area bhi control kar sakte ho for better design control.
