• Skip to primary navigation
  • Skip to main content

  • Home
  • Tutorials
    • Computer Tutorial
    • Internet Tutorial
    • Windows Tutorial
    • Android Tutorial
    • MS Office
      • MS Word Tutorial
      • MS Excel Tutorial
      • MS PowerPoint Tutorial
    • HTML Tutorial
    • CSS Tutorial
    • WordPress Tutorial
    • Blogger Tutorial
    • MS Paint Tutorial
    • WordPad Tutorial
    • Notepad Tutorial
    • Paytm Tutorial
    • WhatsApp Tutorial
  • How To
  • Articles
  • Career Guide
  • Video Tutorials
  • Books
  • Courses

CSS object-fit Property क्या हैं पूरी जानकारी हिंदी में?

अंतिम सुधार September 29, 2018 लेखक TP Staff

इस Tutorial में हम आपको CSS object-fit Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

List of Content

  1. CSS object-fit Property का परिचय – Introduction to CSS object-fit in Hindi.
  2. object-fit Property General Syntax in Hindi
  3. Different object-fit Values in Hindi
  4. object-fit Property Example in Hindi
  5. आपने क्या सीखा?

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

इसे Try कीजिए

<!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>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

नीचे हम 2 Image Define कर रहे हैं. और दोनों Images पर अलग-अलग object-fit Value इस्तेमाल कर रहे हैं.
इस Image को fill किया गया हैं.

इस Image को scale-down किया गया हैं.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS object-fit Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार के object-fit Values के उपयोग के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

About TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Join TutorialPandit on Telegram
Free Computer Literacy Course

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy