CSS के फ्लेक्सबॉक्स को अपनी इमेज को क्षैतिज रूप से स्ट्रेच करने से रोकना सीखें।
फ्लेक्सबॉक्स का एक अजीब डिफ़ॉल्ट व्यवहार है जहां इमेजेस अपने पैरेंट कंटेनर की पूरी चौड़ाई तक क्षैतिज रूप से खिंच जाती हैं। इसलिए यदि आपके पास flex-direction: column वाला एक पैरेंट एलिमेंट (फ्लेक्स कंटेनर) और एक चाइल्ड एलिमेंट (फ्लेक्स आइटम) है जो एक इमेज है, तो इमेज की प्राकृतिक ऊंचाई बनी रहती है जबकि चौड़ाई पैरेंट कंटेनर जितनी चौड़ी खिंच जाती है।
यह व्यवहार असंगत है, आपके ब्राउज़र की डिफ़ॉल्ट CSS स्टाइलशीट (यूजर एजेंट स्टाइलशीट) के आधार पर।
सौभाग्य से, समाधान सरल है। आपको बस अपने इमेज/फ्लेक्स आइटम के align-self प्रॉपर्टी के डिफ़ॉल्ट stretch मान को दूसरे मान से बदलने की आवश्यकता है।
stretch के बजाय आप center का उपयोग कर सकते हैं, जो इमेज स्ट्रेचिंग को हटा देगा, और आपकी इमेज को उसके पैरेंट कंटेनर के बीच में वर्टिकली अलाइन करेगा।
img { align-self: center; }उदाहरण
निम्नलिखित CSS उदाहरण देखें जहां हमारे पास 1 पैरेंट (फ्लेक्स कंटेनर) और 2 चाइल्ड इमेज एलिमेंट्स (फ्लेक्स आइटम्स) अंदर हैं।
- पहले इमेज एलिमेंट में ब्राउज़र डिफ़ॉल्ट
align-self: stretchहै जो आस्पेक्ट रेशियो को बर्बाद करता है। - दूसरे इमेज एलिमेंट पर, मैंने
.self-centerनामक एक यूटिलिटी क्लास जोड़ी, जिसमेंalign-self: centerडिक्लेरेशन है जो स्ट्रेचिंग को हटा देता है:
https://codepen.io/StrengthandFreedom/pen/qBBoMOX
शानदार, समस्या हल हो गई!
नोट: आप top का भी उपयोग कर सकते हैं, अपनी इमेज को उसके पैरेंट कंटेनर के शीर्ष पर वर्टिकली अलाइन करने के लिए।
img { align-self: top; }दोनों विधियां आपकी इमेज से स्ट्रेच मान को हटा देंगी, लेकिन चाहे आपको top या center का उपयोग करना चाहिए यह इस बात पर निर्भर करता है कि आप अपनी इमेजेस के साथ क्या करना चाहते हैं।
जानने योग्य बातें
फ्लेक्स आइटम्स का डिफ़ॉल्ट align-self मान stretch होता है। इसलिए चाहे आपका फ्लेक्स-आइटम (चाइल्ड एलिमेंट) एक इमेज हो या कोई अन्य HTML एलिमेंट, यह डिफ़ॉल्ट रूप से क्षैतिज रूप से खिंच जाता है।
