Up next in 10
CSS Object-fit and Object-cover _ Sigma Web Development Course - Tutorial #49
12 views
Mar 11, 2024
Tutorial #49 of the Sigma Web Development Course is a deep dive into the powerful CSS properties of Object-fit and Object-cover. This tutorial unpacks the functionalities of these properties, providing participants with a comprehensive guide on effectively controlling the sizing and positioning of images within container elements. Whether you're a beginner or an experienced developer, this tutorial offers valuable insights into optimizing the display of images and ensuring a visually appealing layout. Join the Sigma Web Development Course for Tutorial #49 and elevate your proficiency in leveraging CSS Object-fit and Object-cover to enhance the visual aesthetics and responsiveness of your web projects.
View Video Transcript
0:00
आज हम लोग बात करेंगे object fit और object position properties के बारे मे��
0:03
कभी-कभी एक container के अंदर एक image को हमें कुछ इस तरह से रखना होता है such that उसकी width में वो पूरी cover हो जा��
0:09
या फिर वो पूरी उस डिबे के अंदर अपने aspect ratio को maintain करते हुए fit आ जा��
0:14
इस तरह की चीज़ों को करने के लिए हम लोग यूज़ करते हैं object fit property और object cover property को भी मैं आप लोगों को इस वीडियो में डेटेल में कवर करके बताओंग��
0:21
आप लोग इस वीडियो को like करके नीचे comment section में sigma batch भी जरूर लिख देन��
0:24
चलते हैं computer screen में let's roll the intro यह जो ऑब्जेक्ट फिट प्रॉपर्टी है और ऑब्जेक्ट पोजीशन प्रॉपर्टी है यह एक बहुत बड़ी पॉब्लम क��
0:41
सॉल्व करते हैं सीएसस में और वेब डेवलपमेंट में मैं आप लोगों को दिखाता हूं क्या होता है तो देखो या��
0:46
पहले तो मैं यहाँ पर index.html वीडियो 49 पर बना दिया है, बॉयलर प्लेट टेंप्लेट डालूंगा
0:51
और मैं यहाँ पर आप लोगों को बताऊंगा, CSS, object fit, and position, ठीक है
0:59
और फिर उसके बाद हम background position की भी बात करेंगे, ठीक है, तो अभी मैं यहां पर क्या करूंगा एक कंटेनर बनाऊंगा ठीक है मैंने नाएक कंटेनर मैंने का भाईसाब य��
1:07
कंटेनर है मैं कुछ स्टाइल्स लिखूंगा और स्टाइल के अंदर मैं लिखूंगा कि भाई जो कंटेनर है ना इसकी ज��
1:13
लाइट है वह कर दो आप से टाइट वह पिक्सल्स और इसकी जो विट है वह कर दो आप इटी एट पिक्सल्स और यहां प��
1:20
मैं एक यहां पर बॉडर डालूंगा वह बॉडर टू पिक्सल सॉलिड ब्लैक या वेब बैकग्राउन कलर भी डाल दूंगा यार औ��
1:27
दोस्तों आपके पसंद का डाल दूंगा कलर कोई दिक्कत नहीं तो यह डब्बा बन गया कोई बड़ी बात नहीं करी मैंन��
1:32
डब्बा बनाया सिर्फ ठीक है तो इस डब्बे को बनाने के बाद मैं इसके अंदर एक इमेज डालूंगा और मैं यहां प��
1:37
देखूंगा इमेज और मुझे कि मेज मिल जाएगी ठीक है तो मैं काम करता हूं अपने मेज न्यू टाप करता हूं और यहा��
1:42
पर मुझे इमेज मिल गई है जिसको मैं कॉपी करूंगा और कॉपी करने के बाद मैं यहां पर आयम चीज टेक क��
1:49
अपने आपको दिखाऊं आपको देखो इस तरह से दिख रहा है तो यह इमेज आप देख रहे हो बाहर निकल रही है हमार��
2:03
इस अपने इमेज बड़ी है चोटा है आप सिंपल इस नहीं है तो मैं क्या कर सकता हूं मैं इस इमेज को दे सकत��
2:12
कह सकते हूँ यार एक काम करते है ना simple तो है कहां tension ले रहे हो width दे देते हैं अगर मैं चाहता हूँ इसके अंदर अंदर रहे है��
2:18
width दे देता हूँ मालो मैं 66 pixels और height मालो मैं दे देता हू��
2:24
88 pixels मैंने अपने मन से दे दी height और width but you know what ये image तो खराब हो ग��
2:30
तो यार मैं इसका aspect ratio ढून ढान के परशान हूँ इससे अच्छा मैं क्या करूँग��
2:35
मैंने मानो 466 pixels कर दिया 488 pixels कर दिया अब यहाँ पर देखो यह image थोड़ी खिचसी ग��
2:41
इसका aspect ratio maintain नहीं है ध्यान से सुनना मैं क्या कर सकता हूँ इसको ठीक करने के लि��
2:46
अब यहाँ तो मैं इसका aspect ratio ढूनू जाके यहाँ तो मैं इसका height इतनी ह��
2:50
यह 2 is to 1 image है तो अगर height इसकी मारलो 20 ह��
2:54
ठीक है तो इसकी width मैं उस इसाब से calculate करूँ तो वो सब मैं मैं नहीं पढ़ना चात��
2:59
मैं सिर्फ एक property का इस्तेमाल करूँगा जो CSS ने मुझे प्रदान करी है और वो property का मै��
3:04
बहुत सम्मान करता हूँ और वो है object fit property मैं इसमें object fit लगाऊँग��
3:08
और इस बात को ध्यान से सुनना देखो ध्यान से सुनना मैं उंगली दिखा के बोल रहा हू��
3:13
ध्यान से सुनना क्योंकि आएगा नहीं समझ में बढ़ना, object fit मै��
3:16
अगर यहाँ पर मान लो लिखता हूँ, cover, मैं कहूँगा भाई cover कर लो इस डब्बे को
3:21
इस डब्बे को नहीं, इस width और height को, मैं इस width और height की बा��
3:25
कर रहा हूँ, यह जो image के अंदर मैंने width और height लिखी है, इतने position क��
3:28
को कवर कर लो, यानि की 466 pixel और 488 pixel को कवर कर लो
3:32
जो कि तुम fit तो आ नहीं पाओगा image, तो मैं image से कह रहा हूँ, देखो भाई image, तुमसे ये इस डब्बे में fit तो हुआ नही��
3:38
आ रहा है, क्योंकि तुम्हारा aspect ratio बिगड रहा है, cover such that aspect ratio maintain width 466 height 488 portion aspect ratio maintain cover
3:58
तो मैं काम करता हूँ जो parent है उसकी width और height भी same कर देता हूँ देखो parent से कोई मतलब नहीं ह��
4:03
इस container में मैंने क्या width और height दिया है उससे कोई मतलब नहीं है यहाँ मैंने जो width और height दिया है उसको cover किया जाएग��
4:08
समझ रहे हो आप लोग यानि कि object width cover करने से ये सिर्फ इसकी देखेगा height और width
4:13
इसको अपने parent की height और width से कोई मतलब नहीं है लेकिन तब भी मैं जस्ट आपको दिखाने के लि��
4:17
इसकी width और इसकी height same कर दूँगा ठीक है और height 488 कर दूँग��
4:22
तो 488 और अब आप लोग देखो कि cover करने से क्या ह��
4:25
इसको ढख लिया such that कि aspect ratio maintained हो अगर मैं inspect करके आपको दिखाऊ��
4:31
तब आप लोग यहाँ पर देखो कि यह जो container है देख रहे हो container
4:35
container को इसने ढख लिया और यह image को इस प्रकार से रख दिया कि cover
4:39
कर लिया इस image ने समझ दो अगर इस image को मैं आपको दिखाऊंगा तो यह ऐसी है यहाँ पर यह ऐसी image है ठीक है लेकिन इसने सिर्फ इतना portion image का दिखाया अब मैं चाहता हूँ यार तुमने image को काट दिया मैं कहूँगा यार दी तुमने यार यह वाला portion काट दिया इतना portion देख रहे हो कटा हुआ इतना portion तो CSS आपसे ��
5:11
दो और जगह बचने दो तो उसके लिए हम यूज करते हैं ऑब्जेक्ट फिट कंटेन तो अगर मैं इसको कंटेन करूंगा त��
5:17
इस विट और हाइट में यह ऑब्जेक्ट कंटेन करेगा नहीं कि इमेज कंटेन करेगा पूरा दिखेगा मुझे और देख ल��
5:23
दिख रहा है इस बार लेकिन भाई जब पूरा दिखेगा और aspect ratio भी मुझे maintain करवाना है तो यार यहां से और यहां से जगा तो बचेगी ठीक है चलो जी बढ़िया तो मैं कहूंगा यार यह जगा मुझे अच्छी नहीं लग रही है you know let's revert back to object fit cover ठीक है चलो जी बढ़िया ��
5:53
दिखाना है आपको टॉप राइट दिखाना है आपको बॉटम राइट दिखाना है आपको लेफ्ट और बॉटम लेफ्ट दिखाना है य��
6:03
फिर आपको कौन सा दिखाना है यह आप खुद डिसाइड कर सकते हो ठीक है तो उसके लिए प्रॉपर्टी होती है ऑब्जेक्��
6:09
तो मैं कहूँगा object position जो है आप कर दो top right तो मैं जैसे ही top right करूँगा आप देखो इसने मुझे top right वाला पूरा portion दिखा दिया और इधर वाला काट दिया ठीक है अगर मैं कहूँ bottom right तो मुझे bottom right दिखेगा बहुत ही simple है यार ये चीज बॉटम वाला पूरा दिख रहा है रा��
6:39
दिक्कत नहीं है और इतना ही object fit और object cover के बारे में सीखने स��
6:43
sorry object position और object fit के बारे में सीखने से आपकी जिन्दगी इतन��
6:48
आसान हो जाएगी ने जब आप देखने हम लोग projects बनाएंगे तब हम कितना use करेंगे इस property को बहुत आपकी जिन्दगी आसान होने वाली है इतना ह��
7:09
जो मैंने विट दिया और जो मैंने हाइट दिया है वह इमेज पर लग जाएगी तो इस तरह से जो है यह पूरा फिल करेग��
7:15
पूरी मेज दिखेगी लेकिन डिस्टॉर्ट दिखेगी इसके बाद होती है एक प्रॉपर्टी एक वाल्यू ऑब्जेक्ट फिट की वह होत��
7:21
है मैं आपको दिखाता हूं स्केल डाउन तो मैं अगर स्केल डाउन करूं तो यह छोटा हो जाएगा ठीक है स्केल डाउ��
7:27
हो जाएगी मैं चमारी और ज्यादा तल तो यह स humility हमारी ऑब्जेक्ट की कंटीन और कवर फिल बाय-डेफॉल्��
7:34
object position scale down scale down I hope
8:07
यहां से चाहिए से 20 pixels तो यह obey करेगा ठीक है मैं आपको दिखाता हूं मैं इसको लिए प 해� कर देता हूं ठीक है तो मैं पढ़ करूंगा अगर तो यह यहां से इसने यह जो डिस्टेंस इसकी बढ़ा दी कवर करने के बाद इसने यहां से यह डिस्टेंस ले ली अगर मैं कह द��
8:37
आप कुछ इस प्रकार से भी कर सकते हो, जैसे दिल चाहे आप इसको object position को
8:40
यहाँ पर इन values को use कर सकते हो, percentage values का भी इस्तेमाल आप लोग कर सकते हो, जैसे अगर मैं 50% कर दू इसको
8:46
और इसको भी 50% कर दू, तो आप देखो यह कुछ इस तरह से आजेगा, और अगर मैं यहाँ पर object fit को कर दू��
8:52
say cover तो यह देखो 50% 50% मतलब यह center वाला portion मुझे दिखा रहा ह��
8:58
ठीक है I hope कि clear है सबको और हम इसको काफी इस्तेमाल करने वाल��
9:02
आने वाले videos में अब मैं आप लोगों को background के बारे में बताना चाहता हू��
9:06
एक तो तरीका हो गया, एक image को रखकर, एक image element को रखकर ये सब काम करने का
9:10
लेकिन एक और तरीका होता है, जिससे कि हम इसी image को, URL को इस्तेमाल करते हुए
9:15
background दे सकते हैं इस container को, तो मैंने इसको comment out किया, और मैंने यह जो image है वो तो मेरा भ��
9:20
एक्सिस्टी नहीं कर रहा है इसको मैंने comment out कर दिया तो मैं container पे क्या करूँगा instead of giving background
9:24
color मैं कहूँगा कि I want to give a background और background image मैं दूँग��
9:32
और मैं URL का इस्तेमाल करूँगा और double quotes में URL लगा दूंगा तो मैं कहूंगा इस container में यह background सेट कर दो अब यहां पर यह ऑल्ट इस एग्गल टू क्यों दिख रहा ह��
9:42
I guess मैंने कुछ बढ़ बढ़ कर दिये हाँ मैंने commenting के टाइम पर थोड़ी सी बढ़ बढ़ कर दिये which is fine
9:46
अभी यहाँ पर यह बिलकुल सही दिख रहा है इसको मैं ऐसे करूँगा यहाँ पर डाल दूँग��
9:51
अब ठीक है तो आप लोग देखो यहाँ पर कि जब मैं background image URL ऐसे कर दूँग��
9:56
तो यह एक element नहीं है लेकिन एक background लग गया है अब मानलो मैं चाहता हूँ क��
10:00
मैं center portion देखूँ इस image का तो मैं चाहता हूँ कि इस container में background
10:04
लग जाए such that मुझे center part दिखे image का या फिर let us say
10:08
top right part दिखे image का तो मैं क्या कर सकता हूँ background position property क��
10:12
इस्तेमाल कर सकता हूँ मालो मैंने top right कह दिया तो मुझे top right portion दिखेगा अगर मैंन��
10:16
मालो 50% 50% कर दिया या फिर मैं इसको center center भी बोल सकता हूँ center
10:22
center तो आप देखो मुझे center वाला portion दिखेगा without image का aspect ratio change करे��
10:29
ठीक है अब यह image नहीं है यह background है ठीक है कभी कभ��
10:32
बहुत सारे लोग चाहते हैं कि उनकी images download ना हो पाएं inspect element करके noobs उनकी images
10:36
इसको डाउनलोड ना कर पाएं तो वह बैकरांड लगा देते हैं लेकिन वह डाउनलोड हो जाता है यहां से बैकरां��
10:40
इमेज से ठीक है तो करने वाले तो सब कर लेते हैं बट मैं जस्ट बता रहा हूं आपको काफी लोगों को मैंने देख��
10:46
background लगा देते हैं ताकि image download ना हो ठीक है so I hope की और right click करने से भी open image
10:52
in new tab नहीं आता है जब आप background लगाते हो ने तो यहाँ पर option नहीं आता है open image in new tab क��
10:56
तो कभी भी आपको image को download होने से बचाना है noop स��
10:59
सब से नहीं बचा सकते हैं आप noop से script background background position background image image background background position
11:58
इस repeat property को हटाने के लिए आप background repeat का इस्तेमाल करते हो
12:02
अगर आप no repeat लिख दोगे न, x में repeat होगा न, y में repeat होगा, अगर आप repeat x लिख दोगे, तो अगर छोटा हुआ
12:10
अगर जो background image का width है वो छोटा हुआ, तो x में repeat होगा, y में repeat नहीं होगा
12:16
तो देखो यह x में repeat होगा, y में repeat नहीं होगा अब x में इसको ज़रूरती नहीं पड़ी repeat होनी क��
12:20
पूरा हो गया, देखो repeat हो रहा है by the way अगर देखो इसको दियान से, zoom करके दिखाता हू��
12:23
यहाँ से repeat होना शुरू हो गया यह लेकिन almost इसकी width cover हो गई थ��
12:27
तो यह पता नहीं चल रहा है उतना लेकिन y में यह repeat हो रहा था तो अगर आप चाहते हो कि repeat नहीं हो तो आप no repeat लिख द��
12:32
in most of the cases आप no repeat का इस्तेमाल करोगे और no repeat आप कर दोगे तो यह ऐसा दिखेग��
12:37
अमालो आप चाहते हो यह center में आ जाए बिल्कुल तो आप background position का इस्तेमाल कर सकते ह��
12:40
center center तो देखो यह कुछ इस प्रकार से इकदम center पर आ जाएगा आपका background
12:44
कभी कभी ऐसा होता है कि हमारी background image काफी बड़ी होती है और आप सिर्फ center part
12:48
या top right part या top left part उसका दिखाना चाहते हैं तो वो आप दिखा सकते है��
12:52
इन properties का इस्तेमाल करके, तो ये थी कुछ background की related properties
12:57
I hope आपको समझ में आ गई होंगी, फिर हमारे पास यहाँ पर, background repeat हो गया
13:02
background clip के बारे में आप लोग को बताता हूँ, तो जो background clip है, उसमें आप या तो border box लिख सकते हो
13:07
या padding box लिख सकते हो, तो मैं आपको दिखाता हूँ कि इसका क्या मतलब है, MDN reference पर जाकर
13:11
थोड़ा clearly आपको समझ में आएगा, तो देखो, जब आप कहते हो कि background clip border box है
13:15
तो यह आपका content होता है, अगर आप padding box करते हो, तो padding हटा के आपका content होता है
13:21
content box करते हो आप लोग, तो अंदर होता है आपका content यह padding जो है वो नहीं आती ह��
13:25
वो गिन्ती में नहीं आती है ठीक है काफी कम use होती है to be honest यह background clip property
13:30
but it's good to know ठीक है और एक बात और बोलना चाहूँगा इस वीडियो मे��
13:34
कि ऐसी बहुत सारी properties होंगी जो कि खुद explore करोगे आप लोग बट जो मैं इस course में पढ़ा रहा हू��
13:39
99.9% मैंने सब कुछ आपको बता दिया है और projects के तुरू और भी सब cover हो जाएग��
13:44
तो आपलोग को tension लेनी की ज़रूरती नहीं है बिलकुल भी तो ये सारी properties I hope आपलोग को पसंद आए��
13:50
जो code है वो मैं डाल दूँगा गिटअप पर जारा अपडेट होता जा रहा ह��
13:54
अगर आपने प्लेलिस्ट एकसेस नहीं कर रही है तो इसको यहाँ क्लिक करके बुक माक और सेव करे��
13:58
और एक रिक्वेस्ट है मेरी इस वीडियो में आप लोगों से कि आप यार पहले वीडियो में जाक��
14:02
इस course को review कर दो यार आप 5 में से कितने stars देना चाहते हो इस free course क��
14:07
आप please मुझे वहाँ पर comment में बता दो ताकि वो लोग जो की समझ रहे हैं यह तो एक free course ह��
14:11
इस course को काफी हलके में लिया जा रहा है और मैं आप लोगों को बता दूं क��
14:15
इस course में मैंने वो सारी चीज़ें डाली हुई है मैं तो कहूँगा अभी तक कोई किसी भी तरह के paid course में नहीं देता ह��
14:22
मैं यह नहीं कहूँगा दे नहीं सकता मैं इस तरह की बातें नहीं करता हूँ देखो यार करने को तो हर कोई सब कुछ कर सकता ह��
14:28
और आप में से कोई इससे अच्छा course बना सकता है तो capabilities की तो बात मैं करता नहीं seas
14:32
कोई कर नहीं सकता ऐसा पर अभी तक जो है सबसे बढ़िया course यह ह��
14:36
web development का तो मैं चाहता हूँ आप लोग access करो यार मैं चाहता हूँ ज़ाधर से ज़ाधर लोग access करें या��
14:40
को कि इतनी मेहनत डाल के मैंने बनाया है पहले वीडियो में जाकर ज़रा बता देना कि वाई इ��
14:44
कोर्ट्स के अंदर कितना ज्यान भरा हुआ है किस तरह की टीचिंग से किस तरह की लर्निंग से और अभ��
14:48
best is yet to come, हम बहुत अच्छे अच्छे projects बनाने वाले हैं, तो मेरी request बस आपस��
14:53
ही है, कि आप पहले वीडियो में जाकर एक अपना review डाल दें, कि भा��
14:56
इस course का क्या review है, thank you so much guys for watching this video, and I will see
15:01
you next time करते है��