Reputation: 37
Hey guys so I'm working on a website but I have noticed the image below my sustainability header is too small, so I am trying to resize it to fit the full width of the browser but it's proved tricky. What could be the solution?
<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>
Upvotes: 1
Views: 29
Reputation: 14873
To fit the full width of the browser you can set his width to 100vw
that mean 100% of the Viewport Width
:
body {
padding: 0;
margin: 0;
}
.full-width {
width: 100vw;
}
<p>Default width:</p>
<img src='https://i.sstatic.net/4iGwt.jpg?s=32&g=1' />
<p>Full width:</p>
<img src='https://i.sstatic.net/4iGwt.jpg?s=32&g=1' class='full-width' />
According to your html tree, this css selector should target the image:
#sustainability .card .card-body img {
width: 100vw;
}
Upvotes: 1