बूटस्ट्रैप/फ्लेक्सबॉक्स कार्ड: डेस्कटॉप पर बाईं ओर दाईं ओर छवि

Question

मैं बूटस्ट्रैप सक्षम के साथ बूटस्ट्रैप 4 का उपयोग कर निम्न कार्ड लेआउट बनाने की कोशिश कर रहा हूं। चित्र मेरे वर्तमान कार्यान्वयन से लिया गया है और यह अपेक्षा की तरह काम करता है।

HTML संरचना पीछा कर रहा है:

:

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="card"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <img class="card-img-bottom" src="img1.jpg" alt="" title=""> 
     </div> 
    </div> 
    </div> 
</section> 

अब जब मैं बड़ी स्क्रीन के लिए पैमाने पर, मैं निम्नलिखित उत्पादन (जो बूटस्ट्रैप के साथ उम्मीद है, लेकिन चाहता था नहीं एक) मिला

मैं इसके बजाय क्या देखना चाहूंगा:

तो मेरा सवाल यह है कि, मैं इस प्रकार के लेआउट को सही ढंग से कैसे कार्यान्वित कर सकता हूं? मैं फ्लेक्स-बॉक्स का उपयोग कर रहा हूं, इसलिए बूटस्ट्रैप कॉलम (col- *) हमेशा एक ही ऊंचाई है जो वास्तव में मैं चाहता हूं। लेकिन मुझे दो स्तंभों के बीच पैडिंग को हटा देना चाहिए, फिर दोनों कॉलम सामग्री को हमेशा 100% माता-पिता की ऊंचाई को कवर करने के लिए बनाना चाहिए, और आखिरकार यह सुनिश्चित कर लें कि चित्र इसके पहलू अनुपात को बनाए रखता है, इसलिए इसे केंद्र से फसल की जानी चाहिए जैसा कि मैंने उदाहरण में किया है।

मैंने गुगल किया है और कई अलग-अलग समाधानों की कोशिश की है, लेकिन उनमें से सभी अत्यधिक जटिल या "हैकी" समाधान प्रतीत होते हैं। तो मुझे आश्चर्य है कि यह सच है कि इस तरह के लेआउट को लागू करने का कोई आसान तरीका नहीं है ...?

नोट: समाधान बूटस्ट्रैप से संबंधित नहीं है, इस तरह की समस्या के लिए सामान्य समाधान भी बेहतर है।

Answer 1

मुझे पृष्ठभूमि आकार: कवर का उपयोग करके ऐसा करने का एक तरीका पता चला। मुझे img के बजाय div का उपयोग करना पड़ा, लेकिन अन्यथा यह समाधान काम करता है और मेरे मामले में img इतना आवश्यक नहीं है। अन्य समाधान अभी भी स्वागत है। कार्ड img-नीचे के लिए

<section> 
    <div class="container"> 
    <div class="card"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <div class="card-block"> 
      <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p> 
      <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p> 
      <a href="#" class="btn btn-primary">Read More</a> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="card-img-bottom"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

, मैं सेट शैली:

मैं अपने एचटीएमएल एक छोटे से संशोधित

.card-img-bottom { 
    color: #fff; 
    height: 20rem; 
    background: url(images/img1.jpg) center no-repeat; 
    background-size: cover; 
} 

और डेस्कटॉप ध्यान में रखते हुए, मैं बदल 100% ऊंचाई इतनी ऊंचाई है हमेशा कार्ड-ब्लॉक की ऊंचाई से भी समान है।

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