html - 仅在 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

overflow:hidden 还填充了 bootstrap 用来添加间距的填充。

所以我将 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;
}