CSS Display an Image Resized and Cropped

Question

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the imag

Answer 1

Try using the clip-path property:

The clip-path property lets you clip an element to a basic shape or to an SVG source.

Note: The clip-path property will replace the deprecated clip property.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

More examples here.