मैं दो स्तंभों के साथ एक ग्रिड बनाने की कोशिश कर रहा हूँ (col-6 | col-6)। लेकिन सही कॉलम में एक छवि के साथ तरल होना चाहिए। मैंने निम्नलिखित की कोशिश की:

Preview

 <div class="container-fluid" style="background-image: url('public/img/example.jpg'); background-size: 50% auto; background-position: center right; background-repeat: no-repeat;">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <h1>Hello</h1>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                    <p>Lorem Impsum Lorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem ImpsumLorem Impsum</p>
                </div>
            </div>
        </div>
    </div>

मेरे समाधान के साथ समस्या यह है कि जब बाईं ओर की सामग्री बड़ी हो जाती है: छवि अनुपात में रहने के लिए कुछ जगह बनाती है। (लाल पृष्ठभूमि के साथ चिह्नित स्थान: E

मैं इस कवर को बनाने में सक्षम नहीं हूं क्योंकि मैं पहले से ही पृष्ठभूमि-आकार का उपयोग करके छवि को आधी स्क्रीन पर सेट कर रहा हूं। तो मैं जो करने की कोशिश कर रहा हूं वह यह है कि छवि लाल पृष्ठभूमि को भी भरती/कवर करती है। इसे कैसे प्राप्त किया जा सकता है?

3
Lars Flieger 30 नवम्बर 2020, 15:08

1 उत्तर

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

सबसे पहले - मुझे लगता है कि आप बूटस्ट्रैप 4 का उपयोग करते हैं।

आप अपनी छवि को "उत्तरदायी" बनाने के लिए देशी बूटस्ट्रैप ग्रिड और बूटस्ट्रैप के .img-fliud को मिला सकते हैं (देखें यहां विवरण के लिए)।

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="img-fluid" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.</p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="img-fluid my-image" src="https://picsum.photos/seed/picsum/640/480" alt="Responsive image">
    </div>
  </div>
</div>

यदि आप चाहते हैं कि आपकी छवि आपके बाएं कॉलम के समान ऊंचाई (या छवि के आधार पर बड़ी) हो - तो आप पहलू अनुपात को बनाए रखने के लिए min-height: 100%; के साथ object-fit: cover; का प्रयास करें।

.my-image {
  min-height: 100%;
  max-width: 100%;
  object-fit: cover;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-3 mb-3">
  <div class="row">
    <div class="col-6">
      <h1>Header 1</h1>
      <p>Small text</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-6">
      <h1>Header 2</h1>
      <p>Large text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in vestibulum lorem. Aliquam elementum suscipit mi, gravida iaculis sapien malesuada maximus. Cras vehicula lectus at urna pharetra, non dictum felis mollis. Mauris vitae justo pretium
        justo lacinia rutrum efficitur rutrum leo. Sed tincidunt nec dui non posuere. In hac habitasse platea dictumst. Curabitur mauris turpis, gravida vitae mollis id, facilisis non urna.

      </p>
      <p>Donec rhoncus gravida tincidunt. Pellentesque interdum tortor sit amet euismod gravida. Phasellus blandit metus et diam euismod vulputate. Morbi accumsan, nunc vitae congue fermentum, lectus velit iaculis arcu, sed consequat orci nibh quis nisl.
        Sed nec diam vestibulum, ultrices augue porttitor, congue orci. Praesent ac justo massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a odio molestie urna finibus commodo et hendrerit ligula.
        Etiam eleifend dui sit amet tortor suscipit sagittis. Etiam ex risus, pellentesque vel elementum vitae, elementum sed nibh. Aliquam libero lectus, blandit nec aliquam id, dictum vestibulum lorem. Fusce facilisis augue non justo ultrices eleifend.
        Ut ornare ut erat nec pellentesque. Donec posuere, urna vel lobortis mattis, nulla mi rhoncus lacus, nec porttitor eros nisi id quam. Nullam quam metus, dictum in mattis sed, suscipit id ex.</p>
    </div>
    <div class="col-6">
      <img class="my-image" src="https://picsum.photos/seed/picsum/1000/1000" alt="Responsive image">
    </div>
  </div>
</div>
1
fen1x 30 नवम्बर 2020, 13:06