如何更改自举映像的大小？

问题描述

伙计们，所以我在一个网站上工作，但我注意到可持续性标题下的图像太小，因此我试图调整其大小以适合浏览器的整个宽度，但事实证明这很棘手。有什么解决方案？

<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>

解决方法

要适合浏览器的整个宽度，可以将其宽度设置为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' />

根据您的html树，此css选择器应定位图像：

#sustainability .card .card-body img {
  width: 100vw;
}