मैं बूटस्ट्रैप में एक कार्ड जैसी बड़ी इमेज बनाना चाहता हूं (इमेज ओवरले ) लेकिन छवि बहुत बड़ी है और मुझे जितनी ऊंचाई चाहिए..यह मैंने किया है:यहां छवि विवरण दर्ज करें

एचटीएमएल:

<section class="card bg-dark no-border">
        <div class="flex-column justify-content-center align-items-center bg-danger text-dark">
            <img class="card-img img-fluid" src="img/bg_1.jpg" alt="Card image">
            <div class="card-img-overlay text-center m-auto">
                <h5 class="card-title mt-3">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
                <p class="card-text">Last updated 3 mins ago</p>
            </div>
        </div>
    </section>

और क्या किसी को फ्लेक्स के साथ टेक्स्ट सेंटर बनाने का बेहतर तरीका पता है ?? .. मैं इसके लिए मार्जिन का उपयोग कर रहा हूं लेकिन यह फ्लेक्स बॉक्स करने का यह अच्छा तरीका होगा ...

0
Faraz salehi 25 जिंदा 2020, 11:04

3 जवाब

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

मैंने इसे वेब पेज में दिखाने के लिए एक बड़ी छवि के लिए किया था, ऐसा करने के लिए मैं अपनी खुद की कक्षा लिखता हूं:

सीएसएस:

<style>
.proposal{
    background-image: url("http://lorempixel.com/1020/200/nature/");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    min-height: 200px;
}
</style>

एचटीएमएल:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<section class="container-fluid proposal justify-content-center align-items-center d-flex">
    <div class="row flex-row  justify-content-center align-items-center">
        <div class="col-12 col-sm-5">
            <p class="text-center text-sm-left">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis cupiditate deleniti dignissimos dolorem doloremque, illo laborum, libero, nesciunt odit qui sit veritatis? Atque illum iusto maxime, nulla optio saepe?
            </p>
        </div>
        <div class="col-12 col-sm-5 text-center">
            <a href="#" class="btn btn-warning" id="visit_time">btn</a>
        </div>
    </div>
</section>
0
Faraz salehi 2 फरवरी 2020, 09:11

मैं आपको एक खराब संकल्प के साथ सिर्फ एक तस्वीर देता हूं

0
Inlife and you too. 25 जिंदा 2020, 11:18

कृपया पहले फ्लेक्सबॉक्स दस्तावेज़ीकरण को प्राथमिकता दें लेकिन आपकी समस्या के लिए, मैं आपको एक समाधान देता हूं।

बस अपने टेक्स्ट ब्लॉक में d-flex flex-column justify-content-center align-items-center जोड़ें और टेक्स्ट उद्देश्य दिखाने के लिए मैं इसे text-danger के साथ हाइलाइट करता हूं

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<section class="card bg-dark no-border">
    <div class="bg-danger text-dark">
        <img class="card-img img-fluid" src="https://images.wallpaperscraft.com/image/bird_silhouette_vector_134154_1920x1080.jpg" alt="Card image">
        <div class="card-img-overlay text-center m-auto d-flex flex-column justify-content-center align-items-center text-danger">
            <h5 class="card-title mt-3">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
            <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>
</section>
0
Nisharg Shah 25 जिंदा 2020, 18:11