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

Solution 1:

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

So I moved the img-sub to the <a> element (also fixed up some css)

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

HTML:

</div><divclass="col-md-4"><ahref="/posts/1"class="img-sub"><imgclass=""src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a></div><divclass="col-md-4"><ahref="/posts/1"class="img-sub"><imgclass=""src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a></div></div><divclass="row"><divclass="col-md-4"><ahref="/posts/1"class="img-sub"><imgclass=""src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a></div><divclass="col-md-4"><ahref="/posts/1"class="img-sub"><imgclass=""src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a></div><divclass="col-md-4"><ahref="/posts/1"class="img-sub"><imgclass=""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-subimg {
  height: 100%;
  position: absolute;
  margin: 0 auto;
  left: -50%;
  width: auto;
}

Solution 2:

You can use the clip property to remove a part of the image :

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

see the fiddle: https://jsfiddle.net/dp52dv2p/

and how to use clip : http://www.zonecss.fr/proprietes-css/clip-css.html

Solution 3:

In your CSS change this:

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

To this:

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