CSS object-fit Property
Introduction to CSS object-fit Property
CSS object-fit property बताती है की किसी image या video को उसके container में fit करने के लिए किस प्रकार resize किया जाना चाहिए।
कई बार ऐसा हो सकता है की आपके webpage में बहुत ही कम space available है और आप किसी image को show करना चाहते है। जब आप उस space में image को show करते है तो कम space होने की वजह से image सिकुड़ जाती है और ठीक से display नहीं होती है।
या फिर कई बार ऐसा भी हो सकता है की आपके पास बहुत सा space available है लेकिन आपकी image की size बहुत कम है। आप चाहते है की image पुरे space को cover करे लेकिन जब आप ऐसा करते है तो image बहुत अधिक strech हो जाती है और ठीक तरह से display नहीं होती है।
Situation कोई भी हो object-fit property के द्वारा आप image या video को इस प्रकार resize कर सकते है की वह available space में आपकी आवश्यकता के अनुसार ठीक से display हो सके। इसके लिए इस property की values के रूप में आपके पास बहुत से options available है।
Syntax of CSS object-fit Property
निचे CSS object-fit property का general syntax दिया जा रहा है।
object-fit : none | fill | contain | cover | scale-down;
जैसा की आप ऊपर दिए गए syntax में देख सकते है object-fit property की 5 possible values हो सकती है। इनके बारे में निचे explain किया जा रहा है।
- none - इस value को define करने से object (image or video) को किसी भी प्रकार से resize नहीं किया जाता है।
- fill - इस value को define करने से object द्वारा container पूरी तरह fill कर दिया जाता है फिर चाहे इसके लिए image को stretch करना पड़े या सिकुड़ना पड़े। इस value द्वारा object का aspect ratio (real object clarity) नहीं preserve किया जाता है। यानि की image को stretch और shrink करते समय image की quality का ध्यान नहीं रखा जाता है।
- contain - इस value को define करने से container में fit होने के लिए object की size को increase या decrease किया जाता है लेकिन object के aspect ratio को preserve किया जाता है।
- cover - इस value को define करने से object द्वारा container को पूरी तरह fill कर दिया जाता है साथ ही object का aspect ratio भी preserve किया जाता है। लेकिन container को fill करने के लिए object को sides में से clip किया जाता है।
- scale-down - इस value को use करने से object के aspect ratio को preserve करते हुए object को shrink किया जाता है ताकि वह container में आसानी से fit हो सके।
Example of CSS object-fit Property
CSS object-fit property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS object-fit Property Demo</title>
<style>
#myImage
{
width:300px;
height:100px;
object-fit : scale-down;
}
</style>
</head>
<body>
<img src="/images/bht-logo.jpg">
</div>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
