在div中仅显示图像的某些部分

Question

我怎么才能在div中显示图像？请参考下图，其中只有蓝色突出显示部分内的部分图像应该是可见的，而不应该显示红色的部分，在图像之间留出空格。

输出将是下图。

这里是jsfiddle。

我也在这里粘贴了代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

溢出：隐藏也填充了引导程序用来添加排水沟的填充。

所以我将img-sub移动到<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

您可以使用clip属性删除部分图片：

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

看小提琴：http://hortonworks.com/products/data-center/hdp/

以及如何使用剪辑：https://jsfiddle.net/dp52dv2p/

Answer 3

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