सीएसएस के फ्लेक्सबॉक्स को आपकी छवि को क्षैतिज रूप से खींचने से रोकने का तरीका जानें।
फ्लेक्सबॉक्स में एक अजीब डिफ़ॉल्ट व्यवहार होता है जहां छवियां क्षैतिज रूप से अपने मूल कंटेनर की पूरी चौड़ाई तक फैली होती हैं। इसलिए यदि आपके पास flex-direction: column . के साथ एक पैरेंट एलिमेंट (फ्लेक्स कंटेनर) है और एक चाइल्ड एलिमेंट (फ्लेक्स आइटम) जो एक इमेज है, फिर इमेज की प्राकृतिक ऊंचाई बनाए रखा जाता है, जबकि चौड़ाई को पैरेंट कंटेनर जितना चौड़ा किया जाता है।
आपके ब्राउज़र की डिफ़ॉल्ट CSS स्टाइलशीट (उपयोगकर्ता एजेंट स्टाइलशीट) के आधार पर यह व्यवहार असंगत है।
सौभाग्य से, समाधान सरल है। आपको बस अपनी छवि/फ्लेक्स आइटम के align-self . को बदलने की आवश्यकता है संपत्ति का डिफ़ॉल्ट stretch दूसरे मान के साथ मान।
stretch . के बजाय आप center . का उपयोग कर सकते हैं , जो छवि के खिंचाव को हटा देगा, और आपकी छवि को उसके मूल कंटेनर के बीच में लंबवत रूप से संरेखित करेगा।
img {
align-self: center;
}उदाहरण
निम्नलिखित सीएसएस उदाहरण देखें जहां हमारे अंदर 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 एलिमेंट, यह डिफ़ॉल्ट रूप से क्षैतिज रूप से खिंच जाता है।