Display image in div , in case its height is more than width (portrait), show mid part of image

Display image in div , in case its height is more than width (portrait), show mid part of image

Dear Sir

pls refer


all images in landscape (height less than width)  like 


are properly aligned

however the images in portrait  (height more than width)

like


or


only top part is visible

for landscape images there is no issue

However in case of Portrait type of images (where in the height is more than width)
only top part is visible

I want to show mid part of the image in case of portrait type of image instead of top part

i feel this is possible using jquery

pls pls help



I tried


used css as follow

  1. /* Thumbnail styling */

  3. .thumbnail {
  4.   position: relative;
  5.   width: 200px;
  6.   height: 200px;
  7.   overflow: hidden;
  8. }
  9. .thumbnail img {
  10.   position: absolute;
  11.   left: 50%;
  12.   top: 50%;
  13.   height: 100%;
  14.   width: auto;
  15.   -webkit-transform: translate(-50%,-50%);
  16.       -ms-transform: translate(-50%,-50%);
  17.           transform: translate(-50%,-50%);
  18. }
  19. .thumbnail img.portrait {
  20.   width: 100%;
  21.   height: auto;
  22. }
and PHP script as follow (dynamic ...image names are fetched from database)

  1. <div class="thumbnail">
  2.    <img src="<?php echo $srows['actualimage'];?>"  style="border:3px solid #ccc ;" >
  3.    </div>
however being responsive (my personal opinion) 
the crop is not working

refer following link after using crop



in need of solution