Question

我有一个galery，我正在尝试裁剪高度超过150像素的照片，以使所有图像具有相同的高度。其实我有这个 - ＆gt; http://postimg.org/image/9t605lhdv/

我想做类似的事情 - ＆gt; http://postimg.org/image/v1zjjwuyp/

例如，这个网站有这个“作物”，但我无法看到他的CSS。 - ＆GT; 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

在示例中last6图像裁剪。正如你问的那样！

如果想使用Hover over effect

，则会产生另一种悬停效果

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

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

1 个答案: