如何更改引导图像的大小？

Question

大家好，我正在做一个网站，但我注意到我的可持续性 header 下面的图片太小了，所以我试图调整它的大小以适应浏览器的整个宽度，但它事实证明很棘手。可能的解决方案是什么？

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

Answer 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' />

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

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

如何更改引导图像的大小？

How to change the size on my bootstrapped image?

html

css

twitter-bootstrap

responsive