Question

请帮助解决问题。

橡胶块，其包含水平排列的三个图像。 jsfillde 图片为服务器提供了一些比另一个更大的服务器。

我需要让所有图片都以相同的尺寸显示。请帮助修剪整体情况。重要的是图像被裁剪，其比例保持不变形。

的CSS：

  .masonry .item{
    width: 32%;
    display: inline-block !important;
    vertical-align: top !important;    
  }

    .masonry .item .a_inner {
      padding: 0 10px 20px 10px;
      display: block;
      color: #252525;
      font-weight: bold;
      font-size: 16px;
      font-family: 'PT Sans', sans-serif;
      line-height: 18px;
    }  

      .masonry .item .a_inner .article {
        border: 1px solid #efefef;
      }    

        .masonry .item .a_inner img {
          width: 100%;
          height: auto;
          display: block;
          vertical-align: middle;
        }      

        .masonry .item .a_inner .h4 {
          line-height: 18px;
          font-size: 16px;
          margin: 18px;
          font-weight: bold;
          color: #000;
          text-decoration: none;
          overflow: hidden;
        }

Answer 1

用div标签替换图像标签并使用

.n-item-image {
    height:100px;
    width:100%;
    background-size: cover;
}

.imagex {
    background:url('http://static3.smi2.net/img/225x150/2357799.jpeg')  no-repeat;
}

http://jsfiddle.net/dbt7k8m7/2/

如何裁剪图像而不改变比例？

1 个答案: