image that fills the entire width of the screen

Question

I want the image to fill the entire width of the screen but without removing the class = "img-fluid d-block" from the image. The image looks like this: https://postimg.cc/2qw4GK4q

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block">
    </div>
  </div>
</div>

doesn't work, nor with 'width:100vw' nor wirth 'width: 100%' — palanganero, Dec 09 '20 at 18:56
@palanganero for me it works, image is full width with no horizontal scrollbar — john Smith, Dec 09 '20 at 19:16
with this image works, but with the original one doesn't. It should be because of the size. — palanganero, Dec 09 '20 at 21:57

score 0 · Accepted Answer · answered Dec 10 '20 at 01:23

I think your main problem is that you're using an older version of bootstrap and I'm not sure if those classes you're using (img-fluid and d-block) even exist in the old 3.x version

In the below example the only changes needed are to add vw-100 class to the image and add the p-0 class to the container div. I stripped out the unused script blocks and such to make it clearer.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 p-0">
      <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block vw-100">
    </div>
  </div>
</div>

image that fills the entire width of the screen

1 Answers1