僅顯示div內圖像的某些部分

Question

我怎樣才能在div內顯示圖像？請參考下圖，其中只有藍色突出部分內部的圖像部分應該可見，而不應顯示紅色的部分在圖像之間留下空間。

輸出將是下面的圖片。

這是jsfiddle。

我也在這裏粘貼了代碼。

.img-sub { 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 
.img-sub img { 
 
    height: 100%; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    left: -100%; 
 
    right: -100%; 
 
    width: auto; 
 
}

<div class="container-fluid"> 
 
    <div class="row grid-container"> 
 
    <div class="col-md-12"> 
 
     <div class="row"> 
 
     <div class="col-md-5"> 
 
      <div class="row img-container img-featured"> 
 
      <div class="col-md-12"> 
 
       <a href="/posts/1"> 
 
       <img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-7"> 
 
      <div class="row"> 
 
      <div class="img-container"> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="img-container"> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
       <div class="col-md-4 img-sub"> 
 
       <a href="/posts/1"> 
 
        <img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /> 
 
       </a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

溢出：隱藏也填補了這個引導使用添加水槽填充。

所以我移動IMG-子到<a>元件（也固定了一些CSS）

https://jsfiddle.net/y573zfja/3/

HTML：

  </div> 
      <div class="col-md-4"> 
      <a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a> 
      </div> 
      <div class="col-md-4"> 
      <a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
      <a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a> 
      </div> 
      <div class="col-md-4"> 
      <a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a> 
      </div> 
      <div class="col-md-4"> 
      <a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.img-sub { 
    height: 150px; 
    overflow: hidden; 
    width: 100%; 
    display:block; 
    position:relative; 
} 

.img-sub img { 
    height: 100%; 
    position: absolute; 
    margin: 0 auto; 
    left: -50%; 
    width: auto; 
} 

Answer 2

在你的CSS改變這樣的：

.img-sub img { 
     height: 100%; 
     position: absolute; 
     margin: 0 auto; 
     left: -100%; 
     right: -100%; 
     width: auto; 
    } 

要這樣：

.img-sub img { 
     height: 100%; 
     margin: 0 auto; 
    } 

Answer 3

可以使用clip屬性刪除部分圖片：

clip:rect(0, 220px, 150px, 50px); 

看到小提琴：https://jsfiddle.net/dp52dv2p/

以及如何使用夾子：http://www.zonecss.fr/proprietes-css/clip-css.html