basagabi basagabi - 3 months ago 8
HTML Question

Show only certain portions of image inside a div

How could I only show the image inside the div? Please refer to image below wherein only part of the image inside the blue highlighted part should be visible while the one boxed in red should not be shown leaving a space between images.

enter image description here

Output would be the image below.
enter image description here

Here's a jsfiddle.

I've pasted the code here as well.



.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

The overflow:hidden also fills the padding that bootstrap uses to add the gutters.

So i moved the img-sub to the element (also fixed up some 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;
}