如何使图像覆盖全宽

Question

我有以下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>

由于某种原因，这两个 div 很好地并排显示，我无法在这个 sn-p 中并排显示它们。我的问题是，我怎样才能使图像处于全高状态，因为它应该在两个页面上都可以看到。这是现在可见的方式

Answer 1

有几点需要考虑。

(1) DIV 在您的问题中没有并排出现，因为引导程序具有响应性并且断点（引导程序自动从 col-md-5 切换到 col-xs-12 的位置）对于 StackOverflow 是错误的代码区。

Bootstrap 3 breakpoints and media queries

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

(2) 不使用<img> 标签，而是使用CSS background-image 或background 属性，然后使用background-position（cover 或contain）强制图像覆盖包含 div 的特定部分。请注意，（使用 CSS）您可以指定可见窗口的开始/结束位置（例如 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 比堆栈代码片段显示的结果更好。

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 -->