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
selector {object-fit: values;}
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
<!DOCTYPE html>
<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>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment