html - 如何使图像覆盖全宽

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) 而不是使用 <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比 Stack Code Snippet 更好地显示结果。

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