Geek Answers Handbook

Stretch image to fully load container

I have an image with a width of 1300 pixels, with bootstrap I want this image to fill the entire width of my container, which is set to 1300 pixels. I create a row, give it a full 12 columns, and then add an image with a class of responsive images. With this setting, I get the output below.

enter image description here

I want my image to stretch to my image, here is my code.

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

The image is set to 100% wide, so you are not sure why it does not fill the container.

+8
source share
4 answers

Check if this solves the problem:

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

Css no-padding .

.

+18

4.1 w-100 img-Fluid , :

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

: https://github.com/twbs/bootstrap/issues/20830

( 2018-04-20, : https://getbootstrap.com/docs/4.1/content/images/ , img-Fluid max-width: 100%; : ; ", img -fluid img.)

+17

container 15px , , , , row -15px .

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

Codepen: http://codepen.io/m-dehghani/pen/jqeKgv

+2

, , img-Fluid . 100%, Bootstrap class "w-100". , "container-liquid" "col-12" 15 , "row" "-15px". 0.

Note: "px-0" is the bootstrap class that sets left and right indents to 0 and
"mx-0" is the bootstrap class that sets the left and right margins to 0

PS I am using Bootstrap 4.0.

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>
0
source

More articles:


All Articles