इस Tutorial में हम आपको CSS object-fit Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
List of Content
CSS object-fit Property का परिचय
जब कोई Image इसके Container Size से छोटी या बडी होती हैं तो वह Container में Fit होने पर अपनी Quality ख़ो देती हैं. क्योंकि छोटी Image फैल जाती हैं और बडी Image सिकुड जाती हैं.
इस समस्या का समाधान CSS object-fit Property द्वारा किया जाता हैं. CSS object-fit Property बताती हैं कि Image या Video को Container में सही तरह से Display होनेन के लिए कैसे Resize करना हैं?
किसी Image या Video को Container में ठीक प्रकार से Display करने के लिए object-fit Property Elements की Quality को बनाए रखते हुए Resize करती हैं. इसके लिए कई Values काम में ली जाती हैं. जिनके बारे में नीचे बताया गया हैं.
object-fit Property General Syntax
object-fit Property का General Syntax अन्य CSS Properties के Syntax के समान ही आसान हैं. जिस तरह अन्य CSS Properties को Declare किया जाता हैं, उसी प्रकार object-fit Property को भी Declare किया जा सकता हैं.
Different object-fit-functions अथवा Values
- none – इस Value के द्वारा किसी भी प्रकार से Elements को Resize नही किया जाता हैं.
- fill – यह Default Value होती हैं. इस Value से Container Size को Image या Video से पूरा Cover किया जाता हैं. चाहे इसके लिए Elements को फैलाना पडे या सिकोडना पडे.
- contain – इस Value द्वारा Container में Elements को Fit करने के लिए Elements का Size छोटा या बडा तो किया जाता हैं. मगर यह करते समय Aspect Ratio को भी Preserve किया जाता हैं.
- cover – इस Value द्वारा भी Aspect Ratio को Preserve करते हुए Elements को Fit किया जाता हैं. यदि Aspect Ratio में कमी रहती है तो Elements को Clip भी किया जा सकता हैं.
- scale-down – इस Value से Elements को छोटा कर दिया जाता है.
CSS object-fit Property Example in Hindi
इसे Try कीजिए
<html>
<head>
<title>CSS object-fit Property Example</title>
<style type=”text/css”>
#img1 {
width: 200px; height: 400px; object-fit: fill;
}
#img2 {
width: 200px; height: 400px; object-fit: scale-down;
}
</style>
</head>
<body>
<p>नीचे हम 2 Image Define कर रहे हैं. और दोनों Images पर अलग-अलग object-fit Value इस्तेमाल कर रहे हैं.</p>
<img src=”flower.png” id=”img1″ />
<img src=”flower.png” id=”img2″ />
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
इस Image को fill किया गया हैं.
इस Image को scale-down किया गया हैं.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS object-fit Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार के object-fit Values के उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
Leave a Reply