सीएसएस फसली छवियां

CSS में इमेज को क्रॉप करने के कई तरीके हैं; हालांकि, इनमें से सबसे सरल और सबसे प्रभावी हैं:

ऑब्जेक्ट-फिट का उपयोग करना:

object-fit: cover . का उपयोग करते समय , हम आसानी से छवि को क्रॉप कर सकते हैं और फिर भी चित्र के पहलू अनुपात को बनाए रख सकते हैं।

आप object-fit . का उपयोग कर सकते हैं object-position . के साथ CSS में इमेज क्रॉप करने के लिए। object-fit . सेट करने का प्रयास करें छवि पर संपत्ति none और फिर object-position: 50% 50% set सेट करें . यह छवि को कंटेनर में केंद्रित करेगा। पहली संख्या निर्दिष्ट करती है कि छवि को बाईं ओर से कितनी दूर रखना है और दूसरा यह निर्दिष्ट करता है कि छवि को ऊपर से कितनी दूर रखना है।

पृष्ठभूमि-छवि का उपयोग करना:

<div> सेट करें आप चाहते हैं कि आपकी छवि में एक background-image: url(<insert url here>) हो संपत्ति। इसके अलावा, background-size सेट करें करने के लिए cover इसे क्रॉप करने के लिए ताकि पहलू अनुपात बना रहे। background-position डिफ़ॉल्ट रूप से top left है .

इसका उपयोग करने में एकमात्र समस्या अभिगम्यता संबंधी चिंताएं हैं। पृष्ठभूमि-छवियां आवश्यक रूप से स्क्रीन पाठकों द्वारा पढ़ी नहीं जाती हैं, इसलिए यदि उपयोग की गई छवि साइट के समग्र उद्देश्य के लिए महत्वपूर्ण है, तो मैं या तो आपके पृष्ठ पर छवि में क्या चल रहा है, इसका वर्णन करूंगा या कोई अन्य विकल्प चुनूंगा।

चौड़ाई और ऊंचाई, मार्जिन और ओवरफ्लो का उपयोग करना:

On the container your <img> is in (probably a <div> किसी प्रकार का), स्थिति को सापेक्ष और अतिप्रवाह को छिपाने के लिए सेट करें। सापेक्ष स्थिति अनिवार्य रूप से छवि के चारों ओर एक बाड़ लगाती है, इसलिए इसकी निश्चित सीमाएँ होती हैं और फिर अतिप्रवाह संपत्ति उस बाड़ से परे जाने वाली किसी भी चीज़ को छिपा देगी।

मैंने नीचे दिए गए कोड संपादक में अपनी छवियों को क्रॉप करने के विभिन्न तरीकों का प्रदर्शन किया है:

       
 
सामान्य
 
  
 
टॉप क्रॉप किया गया
 
  
 
नीचे काटा गया
 
  
 
नीचे और ऊपर क्रॉप किया गया
 
  
 
राइट क्रॉप्ड
 
  
 
बाएं क्रॉप किया गया 
 
  
 
बाएं और दाएं क्रॉप किए गए
 
  
 
वर्ग फसल
 
  
 
  

 एचटीएमएल में वर्ग नाम विशेषताओं पर एक नज़र डालना सुनिश्चित करें और फिर मिलान करने वाले सीएसएस पर एक नज़र डालें ताकि यह पता चल सके कि हम जिस चित्र को देखना चाहते हैं उसे दिखाने के लिए मार्जिन कैसे सेट किया जा रहा है। 
 
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।