How to make image cover full widht

Question

I have the following HTML

<div id="book_container" class="col-md-7 col-md-offset-1" style="border: 1px solid red;">

  <div class="row">
    <div class="col-md-5" style="border: 1px solid green;">
      <div id="leftInside">

        <div class="overlayImageDiv">

          <div id="left_pagenumber"></div>
          <div id="leftNextPage" data-current-left-page>Previous PAGE</div>
          <div id="leftImageData">Here is the image name</div>
          <div id="PreviousPage2" style="background-color:blue; z-index:1">Previous page</div>
        </div>
      </div>
    </div>
    <div class="col-md-1" style="border: 1px solid blue;" id="coil">
      <img src="http://i2.cdscdn.com/pdt2/5/6/4/1/400x400/ate3660500081564/rw/cuisine-pasta-fileur-angle.jpgg" />
    </div>
    <div class="col-md-5" style="border: 1px solid black;">
      <div id="rightInside">
        <div class="overlayImageDiv">
          <div id="right_pagenumber">
            <div id="rightNextPage" data-current-right-page>NEXT PAGE</div>
            <div id="rightImageData">Here is the image name</div>
            <div id="NextPage">Click Next</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12">Footer</div>
  </div>
</div>

These both divs are side by side well for some reason, I am unable to show them side by side in this snippet. My question is that How I can make the image to be at full height as it should be visible as a coil betweek both pages. Here is how it is being visible now

could you add a picture of what it currently looks like since the snippet is wrong? — Patrick Schaefer, Apr 22 '16 at 19:51

score 0 · Accepted Answer · edited May 23 '17 at 11:59

There are a few points to consider.

(1) DIVs not appearing side-by-side in your question because bootstrap is responsive and the breakpoints (where bootstrap auto-switches from, for example, a col-md-5 to a col-xs-12) are wrong for the StackOverflow code area.

Bootstrap 3 breakpoints and media queries

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

(2) Instead of using an <img> tag, use the CSS background-image or background property, and then use background-position (either cover or contain) to force the image to cover a specific part of the containing div. Note that (with CSS) you can specify where the visible window begins/ends (e.g. center center).

https://css-tricks.com/almanac/properties/b/background/

https://css-tricks.com/almanac/properties/b/background-position/

https://css-tricks.com/almanac/properties/b/background-size/

This jsfiddle displays the result better than the Stack Code Snippet does.

xbody{overflow:hidden;}
.row{height:60px;}
#coilIMG{height:100%;background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/2006-02-04_Metal_spiral.jpg/304px-2006-02-04_Metal_spiral.jpg)center center no-repeat;background-position:contain;}
#coilIMG{overflow:hidden;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="book_container" class="container" style="border: 1px solid red;">

  <div class="row">
    <div class="col-xs-5" style="border: 1px solid green;">
      <div id="leftInside">

        <div class="overlayImageDiv">

          <div id="left_pagenumber"></div>
          <div id="leftNextPage" data-current-left-page>Previous PAGE</div>
          <div id="leftImageData">Here is the image name</div>
          <div id="PreviousPage2" style="background-color:blue; z-index:1">Previous page</div>
        </div>
      </div>
    </div>
    <div class="col-xs-1" style="border: 1px solid blue;" id="coilIMG">
      <!--<img src="catalog/view/theme/fastor/image/coils.png" />-->
    </div>
    <div class="col-xs-5" style="border: 1px solid black;">
      <div id="rightInside">
        <div class="overlayImageDiv">
          <div id="right_pagenumber">
            <div id="rightNextPage" data-current-right-page>NEXT PAGE</div>
            <div id="rightImageData">Here is the image name</div>
            <div id="NextPage">Click Next</div>
          </div>
        </div>
      </div>
    </div><!-- .col-xs-5 -->
  </div><!-- .row -->
  <div class="row text-center">
    <div class="col-xs-12">Footer</div>
  </div>
</div><!-- .container -->

How to make image cover full widht

1 Answers1