CSS object-fit Property

                CSS object-fit property बताती है की किसी image या video को उसके container में fit करने के लिए किस प्रकार resize किया जाना चाहिए। किसी Image या Video को Container में ठीक प्रकार से Display करने के लिए object-fit Property Elements की Quality को बनाए रखते हुए Resize करती हैं। object-fit property की 5 values होती है।

Syntax:-      bject-fit : none | fill | contain | cover

• 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 हो सके।

CSS object-fit Property

                                         The CSS object-fit property tells how an image or video should be resized to fit its container. To display an image or video properly in the container, the object-fit property resizes the elements while maintaining their quality. The object-fit property has 5 values.

Syntax:-       bject-fit : none | fill | contain | cover

• none – By defining this value the object (image or video) is not resized in any way.

• fill – By defining this value, the container is completely filled by the object, even if this means stretching or shrinking the image. The aspect ratio (real object clarity) of the object is not preserved by this value. That means, while stretching and shrinking the image, the quality of the image is not taken into account.

• contain – By defining this value, the size of the object is increased or decreased to fit in the container but the aspect ratio of the object is preserved.

• cover – By defining this value, the container is completely filled by the object and the aspect ratio of the object is also preserved. But to fill the container the object is clipped from the sides.

• scale-down – By using this value, the object is shrunk while preserving the aspect ratio of the object so that it can easily fit in the container.