Crop images and show all imagen with the same height

Question

I have a galery and I´m trying to crop the photos that have height more than 150px to have all images with the same height. Actually I have this --> http://postimg.org/image/9t605lhdv/

I would like to make something similar to this --> http://postimg.org/image/v1zjjwuyp/

For example this website have this "crop", but I can not get it seeing his css. --> http:// postimg.org/image/vq8e2utoh/

My html is:

<ul class="preview-grid container" id="preview-grid">
  <li>
    <a href="photo.jpg" data-largesrc="photo.jpg" data-title="photo-title" data-description="photo">
        <img src="photo.jpg" alt="photo.jpg" class="img">
    </a>
</li>
         <li>
    <a href="photo2.jpg" data-largesrc="photo2.jpg" data-title="photo-title" data-description="photo2">
        <img src="photo2.jpg" alt="photo2.jpg" class="img">
    </a>
</li>
         <li>
    <a href="photo3.jpg" data-largesrc="photo3.jpg" data-title="photo-title" data-description="photo">
        <img src="photo3.jpg" alt="photo3.jpg" class="img">
    </a>
     <li>
    <a href="photo4.jpg" data-largesrc="photo4.jpg" data-title="photo-title" data-description="photo4">
        <img src="photo4.jpg" alt="photo4.jpg" class="img">
    </a>
</li>
    </ul>

and my css is:

    .preview-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
color: #d6d6d6;
}

.preview-grid li {
display: inline-block;
margin: 12px 10px;
vertical-align: top;
height: auto;
width: 22%;
}

.preview-grid li>a, .preview-grid li>a img {
border: none;
outline: none;
display: block;
position: relative;
width: 100%;
height: auto;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
border-top-left-radius: 15px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* max-height: 136px; */
-webkit-box-shadow: 0 0 13px 0 #E8E8E8;
box-shadow: 0 0 13px 0 #E8E8E8;
}

I hope someone can help me!!

Thank you!!

Answer 1

Solved Here: Image As YOu Want

In Example The last6 image is cropped. as you asked in question!

Another hover effect if want to use Hover over effect

CSS Modified

      .preview-grid {
      list-style: none;
      padding: 20px 0;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      color: #d6d6d6;
  }
  .preview-grid li {
      display: inline-block;
      margin: 12px 10px;
      vertical-align: top;
      height: 150px;
      width: 22%;
  }
  .preview-grid li>a, .preview-grid li>a img {
      border: none;
      outline: none;
      display: block;
      position: relative;
      width: 150px;
      height: 150px;
      overflow:hidden;
      border:1px solid yellow;
      -webkit-border-top-right-radius: 0;
      -webkit-border-bottom-right-radius: 15px;
      -webkit-border-bottom-left-radius: 0;
      -webkit-border-top-left-radius: 15px;
      -moz-border-radius-topright: 0;
      -moz-border-radius-bottomright: 15px;
      -moz-border-radius-bottomleft: 0;
      -moz-border-radius-topleft: 15px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 15px;
      -moz-background-clip: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      /* max-height: 136px; */
      -webkit-box-shadow: 0 0 13px 0 #E8E8E8;
      box-shadow: 0 0 13px 0 #E8E8E8;
  }
  .preview-grid li>a img {
      width:100%;
      height:auto;
  }