如何使图像覆盖全面

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并排很好，我无法在这个片段中并排显示它们。我的问题是如何使图像处于完整高度，因为它应该在两页之间作为线圈可见。以下是它现在可见的方式

Answer 1

有几点需要考虑。

（1）DIV没有在您的问题中并排出现，因为bootstrap是响应式的并且断点（其中bootstrap自动切换，例如，从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）使用CSS <img>或background-image属性，而不是使用background标记，然后使用background-position（cover或{ {1}}）强制图像覆盖包含div的特定部分。请注意（使用CSS），您可以指定可见窗口的开始/结束位置（例如contain）。

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显示的结果比Stack Code Snippet更好。

center center

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