मेरे पास दो फ्लेक्सबॉक्स वाला एक कंटेनर है जिसे फैलाने की आवश्यकता है ताकि दोनों फ्लेक्सबॉक्स की ऊंचाई पूरे कंटेनर को भर दे। बाएं फ्लेक्सबॉक्स में मेरे पास एक छवि है जिसे पूरे बाएं फ्लेक्सबॉक्स को भरना होगा। मुझे पूरे कंटेनर की ऊंचाई भरने के लिए दोनों फ्लेक्सबॉक्स प्राप्त करने में परेशानी होती है।

HTML कोड

<div class="container-fluid" id="mainContainerAboutUs">
    <div class="row">
        <div class="col-lg" id = "aboutUsLeft">
            <img src = {% static 'media/cover.jpg' %} alt = 'About us' id = "aboutUsLeftImage">
        </div>
        
        <div class="col-lg" id = "aboutUsRight">
                <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>           
        </div>
    </div>
</div>

सीएसएस

/*About us section */
#mainContainerAboutUs {
    align-items: stretch;
    display: flex;
} 

#aboutUsLeft {
    padding: 0px;
    border: 5px solid grey;
}

#aboutUsLeftImage {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#aboutUsRight {
    justify-content: center;
    border: 5px solid grey;
}

#aboutUsLogo {
    width: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#aboutUsRightHeader {text-align: center;}

मैंने Google खोज से पढ़ा है कि align-items:stretch काम करना चाहिए, लेकिन इस मामले में यह काम नहीं करता है। मूल रूप से मैं जो हासिल करना चाहता हूं वह नीचे दी गई छवि पर तीर द्वारा इंगित किया गया है। यहां छवि विवरण दर्ज करें

0
jxw 2 पद 2020, 08:52

2 जवाब

सबसे बढ़िया उत्तर

मुझे पता चला कि कंटेनर के ऊपर खाली सफेद जगह की समस्या पिछले html सेक्शन में डाले गए कुछ
टैग्स से संबंधित है। साथ ही मैंने पाया कि जैसे ही मैं css में border: 5px red solid का उपयोग करता हूं, मैं कंटेनर बॉक्स के साथ-साथ फ्लेक्स बॉक्स भी देख सकता हूं। इसने मेरे लिए डिबगिंग को बहुत आसान बना दिया।

मैंने नीचे दिए गए कोड को संशोधित किया है, लेकिन मुझे अभी भी एक समस्या है। ब्राउज़र विंडो की चौड़ाई कम करने पर, छवि गायब हो गई।

एचटीएमएल

<div class="container-fluid" id = "aboutUsContainer">
    <div class="row" id="firstRow">
        <img src = {% static 'media/cover.jpg' %} class="col-lg" alt = 'About us' id = "aboutUsLeftImage">

        <div class="col-lg" id="right"> 
            <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>
        </div>
    </div>

और सीएसएस

.row {
    display: flex;
}

#aboutUsLeftImage {
  object-fit: cover;
  flex: 1;
  overflow: hidden;
  height: 500px;
  padding: 0px;
}

#aboutUsLogo {
    width: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#aboutUsRightHeader {text-align: center;}

मैंने अपनी बाईं छवि पर फ्लेक्सबॉक्स डिव को हटा दिया, जैसा कि मैंने कहीं पढ़ा है कि आईएमजी टैग अकेले फ्लेक्सबॉक्स के रूप में कार्य करता है? यदि यह सही है, तो ब्राउज़र विंडो के संकुचित होने पर छवि कैसे गायब हो गई?

0
jxw 4 पद 2020, 23:18

आप गलत तत्व पर align-items: stretch कर रहे हैं, आपको इसे row पर करने की आवश्यकता है जिसमें फ्लेक्स आइटम हैं, आपका सीएसएस होना चाहिए:

#mainContainerAboutUs .row {
    align-items: stretch;
}

या

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं तो अपने html को इसमें संपादित करें:

<div class="container-fluid" id="mainContainerAboutUs">
    <div class="row align-items-stretch">
        <div class="col-lg" id = "aboutUsLeft">
            <img src = {% static 'media/cover.jpg' %} alt = 'About us' id = "aboutUsLeftImage">
        </div>
        
        <div class="col-lg" id = "aboutUsRight">
                <img src={% static 'media/HIDDEN DIMSUM logo final.png' %} alt="logo" id = "aboutUsLogo">
                <h1 id = "aboutUsRightHeader">We are dimsum!</h1>
                <hr class = "cardDeckHorisontalLine">
                <h3>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe iure a quia ab, animi magni repellendus voluptatem quo magnam recusandae id sit, nam enim illum voluptatibus error possimus ratione quisquam.
                </h3>           
        </div>
    </div>
</div>
0
Mudasir Zahoor 2 पद 2020, 09:19