how to crop the image and dont change the ratio?

Question

please help solve the problem.

a rubber block which contains three images arranged horizontally. jsfillde Pictures gives the server and some of them larger than the other.

I need to have all the pictures appear with the same size. please help trim the big picture. it is important that the image is cropped and its proportion remained without distortion.

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

Put the image in a div with fixed height and overflow hidden. — Germano Plebani, Jun 24 '15 at 12:38
parent container is not fixed. see fiddle: http://jsfiddle.net/dbt7k8m7/ — stackov8, Jun 24 '15 at 12:43
You could replace the img with a different element (figure would work), and set the image as a background. You could then use `background-size: cover` to crop the image. There's a whole question about that method [here](http://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch) and Chris Coyier talks about it at [css-tricks](https://css-tricks.com/perfect-full-page-background-image/). You do lose some semantics though. — David Mann, Jun 24 '15 at 12:47
I did not mean the parent container, but another div only for the image: http://jsfiddle.net/whozhdge/2/ — Germano Plebani, Jun 24 '15 at 12:48

score 0 · Answer 1 · answered Jun 24 '15 at 13:41

Replace image tags with div tags and use

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

how to crop the image and dont change the ratio?

1 Answers1