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

<section class="section" id="sustainability">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="text-center mb-4">
          <h3 class="text-primary text-uppercase medium-title">Sustainability</h3>
            <div class="row mt-5 pt-5">
              <div class="col-lg-5 col-sm-8">
                <div class="card border border-light shadow-none">
                  <div class="card-body bg-light">
                    <div class="box-shadow">
                      <img src="images/bg1.jpg" alt="Clean Haven Home page" class="img-fluid mx- 
                              auto d-block" >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
1
Eric Muriithi 17 अगस्त 2020, 23:32

1 उत्तर

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

ब्राउज़र की पूरी चौड़ाई में फ़िट होने के लिए आप उसकी चौड़ाई 100vw पर सेट कर सकते हैं, जिसका अर्थ है 100% of the Viewport Width:

body {
  padding: 0;
  margin: 0;
}

.full-width {
  width: 100vw;
}
<p>Default width:</p>
<img src='https://i.stack.imgur.com/4iGwt.jpg?s=32&g=1' />

<p>Full width:</p>
<img src='https://i.stack.imgur.com/4iGwt.jpg?s=32&g=1' class='full-width' />

आपके एचटीएमएल पेड़ के अनुसार, इस सीएसएस चयनकर्ता को छवि को लक्षित करना चाहिए:

#sustainability .card .card-body img {
  width: 100vw;
}
1
johannchopin 17 अगस्त 2020, 21:05