javascript - How to crop/resize an image to change the aspect ratio using CSS

Question

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 183px(height) aspect ratio 1.77.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 1.77 and displayed as 327px(width)and 183px(height).clip doesn't work as it "clip"s all other images in the view.Also, there is another background image (like a logo) over which the new images are dynamically rendered.So background-image:url(img-url); won't work

How to achieve this through CSS?

Answer 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>