CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lktg52
lktg52

Reputation: 3

Image won't adjust to fill width of container on right side only

The image won't adjust to fill the right side of the container. There is a white space on the right side only. Here is my code. 

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12">
     <img src="../images/Hero-1.png" alt="Hero-1" width="1170" height="601"class="img-responsive1"></div>
   </div>
 </div> 


.img-responsive1 {
    col: col-lg-12 col-md-12;
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
    margin-top: -21px;
}

Upvotes: 0

Views: 1034

Answers (3)

Kemal Mustafic
Kemal Mustafic

Reputation: 26

You need to remove negative margins from your image and paddings from your columns.

Also, you don't need to specify the width of image in your img tag because you are specifying it in css to 100%.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <img src="../images/Hero-1.png" alt="Hero-1" height="601" class="img-responsive1">
    </div>
  </div>
</div> 


.img-responsive1 {
    width: 100%;
}

.col-lg-12, .col-md-12 {
  padding: 0px;
}

Upvotes: 1

b2ok
b2ok

Reputation: 546

It is 12 columns grid. Every class(grid) must have margin 0.

Upvotes: 0

kbdev
kbdev

Reputation: 1315

I'm not sure what you're doing with all of those negative margins (bad practice), but if you want the image to fill 100% of the width of the container, you can do this:

body {
  margin: 0;
}
.img-responsive1 {
    width: 100%;    
}

Upvotes: 0

Related Questions