html - 裁剪图像并显示所有具有相同高度的图像

Question

我有一个画廊，我试图裁剪高度超过 150 像素的照片，以使所有图像具有相同的高度。其实我有这个 --> http://postimg.org/image/9t605lhdv/

我想做类似的东西 --> http://postimg.org/image/v1zjjwuyp/

例如这个网站有这个“裁剪”，但我看不到他的CSS。 --> http://postimg.org/image/vq8e2utoh/

我的 html 是:

<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>

我的 CSS 是:

    .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;
}

我希望有人能帮助我!!

谢谢!!

Answer 1

在这里解决:Image As YOu Want

在示例中，最后 6 张图像被裁剪。正如你所问的!

如果想使用另一个悬停效果 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;
  }