How To Crop/resize An Image To Change The Aspect Ratio Using CSS

I have images of size 700px(width) x 333px(height) which have aspect ratio 2.10. I Want to display these images in a grid.The size of each element in the grid is 327px(width)and 18

Solution 1:

Simply use it as a background image and resize it as you need :

div {
  width:327px;
  height:183px;
  background-image:url(https://lorempixel.com/700/333/);
  background-size:cover;
}

<div></div>

Solution 2:

The aspect is ratio is not quite right 183*1.777=325.191

333/183 = 0.5495 // scale factor - so cropping width

700*.549= 384

384-325=59

crop left and right 30px approx

css

div.myimage{
     width: 325px;
     height:183px; 
     }
div.myimage img{ 
       width: 385px;
       height: 183px;
       marginLeft: -30px
       marginRight: -30px;
    }