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

Posted 2023-02-25

【中文标题】裁剪图像并显示所有具有相同高度的图像

【英文标题】：Crop images and show all imagen with the same height

【发布时间】：2014-08-02 08:00:08

【问题描述】：

我有一个画廊，我正在尝试裁剪高度超过 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"  class="img">
    </a>
</li>
         <li>
    <a href="photo2.jpg" data-largesrc="photo2.jpg" data-title="photo-title" data-description="photo2">
        <img src="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"  class="img">
    </a>
     <li>
    <a href="photo4.jpg" data-largesrc="photo4.jpg" data-title="photo-title" data-description="photo4">
        <img src="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;

希望有人能帮帮我！！

谢谢！！

【问题讨论】：

是的，我可以解决这个问题！等等哥们！

【参考方案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;
  

【讨论】：

Eirenaios，非常感谢！ :D 工作正常。只是一件小事，在其他画廊中，一些图像的尺寸小于 150 像素，可以将这些图像调整为 150 像素吗？谢谢！

上传任何图像，它将根据您的容器调整大小！享受！如果您发现我的演示有效且有用，请接受答案！和平！

非常感谢 Eirinaios 的帮助，我无法解决高度较低的图像的问题，但没关系。现在设计更改，图像应为 20 x 230。