फ्लेक्सबॉक्स पहलू अनुपात बनाए रखने के बजाय मेरी छवि को क्यों बढ़ाता है?

Question

फ्लेक्सबॉक्स में यह व्यवहार होता है जहां यह चित्रों को उनकी प्राकृतिक ऊंचाई तक खींचता है। दूसरे शब्दों में, अगर मेरे पास बच्चे की छवि के साथ एक फ्लेक्सबॉक्स कंटेनर है, और मैं उस छवि की चौड़ाई का आकार बदल देता हूं, तो ऊंचाई बिल्कुल भी नहीं बदलती है और छवि खिंच जाती है।

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

इसका क्या कारण है?

मैंने इस कोडपैन को यह दिखाने के लिए जोड़ा कि मेरा क्या मतलब है।

Comments

फ़ायरफ़ॉक्स और IE में ठीक काम करता है। क्रोम में आप align-self:flex-start इमेज में फिक्स कर सकते हैं । मुझे पता नहीं क्यों, शायद क्रोम में डिफ़ॉल्ट मूल्य खिंचाव है।

इसके अलावा ऊंचाई जोड़ने: 100%; img समस्या को ठीक करता है, मैं यह जानना चाहूंगा कि यह छवि को क्यों बढ़ाता है।

— परं

@blonfu, सभी ब्राउज़रों में डिफ़ॉल्ट मान है align-items: stretch/ align-self: stretch। यदि आप प्रत्येक आइटम के चारों ओर एक सीमा जोड़ते हैं और हटाते हैं wrap, तो आप सभी ब्राउज़रों में सभी आइटम खिंचाव पर ध्यान देंगे: codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin

ठीक है। मैं इसे सीखता हूं, लेकिन छवियों के साथ क्रोम और अन्य ब्राउज़र में अलग तरह से काम होता है। यदि आप ऊंचाई को परिभाषित नहीं करते हैं तो क्रोम पहलू अनुपात का सम्मान नहीं करता है।

@blonfu, हाँ। कोई सवाल नहीं ब्राउज़र असंगतता और अधिक दानेदार स्तर हैं।

— माइकल बेंजामिन

Answer 1

यह स्ट्रेचिंग है क्योंकि align-selfडिफ़ॉल्ट मान है stretch। को सेट align-selfकरें center।

align-self: center;

यहाँ प्रलेखन देखें: संरेखित-स्व

Comments

हां, लेकिन अन्य ब्राउज़र छवियों में पहलू अनुपात की नकल कर रहे हैं। क्रोम न तो img में फ्लेक्स-बेस लागू करता है

मुझे लगता है कि align-self: start;एक मजबूत जवाब हो सकता है क्योंकि छवियों को अपने कंटेनरों के शीर्ष पर लंबवत संरेखित करना चाहिए (केंद्र नहीं) जैसे किसी भी शैली रहित छवि (कोई सीएसएस) नहीं। किसी भी तरह से, दोनों उत्तर स्ट्रेचिंग को ठीक करते हैं। तो यह इस बात पर निर्भर करता है कि ओपी क्या चाहता है - बस ओपी के पद से 'खड़ी केंद्रित' छाप नहीं मिली।

— तादाद

यदि आप किसी चित्र पर चौड़ाई को परिभाषित नहीं करते हैं और यह एक फ्लेक्स-कंटेनर में है, तो यह 100% तक फैल जाएगा। align-self: [flex-start, center...others]छवि को फ्लेक्स-कंटेनर की 100% चौड़ाई लेने से रोकेगा। align-self:centerनिश्चित रूप से इसे ठीक करता है, लेकिन अगर आप चाहते हैं कि आपकी छवि कंटेनर के उपयोग की शुरुआत या अंत से शुरू होalign-items: flex-start or flex-end

— cacoder

आप align-items: centerमाता-पिता पर भी डाल सकते हैं (या जो भी संरेखण आपकी आवश्यकताओं को पूरा करता है)।

— इलेक्ट्रोविर

Answer 2

मुख्य विशेषता यह है align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

Answer 3

मैं एक फाउंडेशन मेनू के साथ एक ही मुद्दे का सामना करना पड़ा। align-self: center;मेरे लिए काम नहीं किया।

मेरा समाधान छवि को एक के साथ लपेटना था <div style="display: inline-table;">...</div>

Comments

हालांकि यह फ्लेक्सबॉक्स के बारे में है।

यह है flexbox के लिए एक समाधान। छवि और div एक flexbox कंटेनर के अंदर हैं।

— हैपिर

Answer 4

जोड़ना marginसंरेखित छवियों:

जब से हम चाहते थे imageहोने के लिए left-aligned, हम कहा:

img {
  margin-right: auto;
}

इसी तरह imageसे right-aligned, हम जोड़ सकते हैं margin-right: auto;। स्निपेट दोनों प्रकार के संरेखण के लिए एक डेमो दिखाता है।

शुभ लाभ...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

Answer 5

यह स्ट्रेचिंग है क्योंकि एलाइन-सेल्फ डिफॉल्ट वैल्यू स्ट्रेच है। इस मामले के लिए दो समाधान है: 1. सेट img संरेखित-स्व: केंद्र या 2. सेट अभिभावक संरेखित आइटम: केंद्र

img {

   संरेखित-स्व: केंद्र
}

या

.परिवेश {
  संरेखित आइटम: केंद्र
}