Javascript 如何使用CSS裁剪/调整图像大小以更改纵横比

我有大小为700px（宽）x333px（高）的图像，宽高比为2.10。我想在网格中显示这些图像。网格中每个元素的大小为327px（宽度）和183px（高度）纵横比1.77。原始图像可以以最小失真进行裁剪或调整大小，每个元素的最终纵横比应为1.77，并显示为327px（宽度）和183px（高度）。

clip

不能作为“clip”使用s视图中的所有其他图像。此外，还有另一个背景图像（如徽标），新图像将在其上动态呈现。因此

background image:url（img url）无效

如何通过CSS实现这一点？
只需将其用作背景图像，并根据需要调整其大小：


div{
宽度：327px；
高度：183px；
背景图片：url(https://lorempixel.com/700/333/);
背景尺寸：封面；
}
纵横比不太正确183*1.777=325.191

333/183=0.5495//比例因子-so裁剪宽度

700*.549=384

384-325=59

左右裁剪约30像素

css

尝试CSS进行裁剪。对象匹配、clip（）、溢出？你到底试过什么不起作用的？有代码要分享吗？我必须添加
背景位置：50%50%作为well@dany如果要控制要裁剪的内容，请选择“是”。您也可以使用
背景位置：中间
div.myimage{
     width: 325px;
     height:183px; 
     }
div.myimage img{ 
       width: 385px;
       height: 183px;
       marginLeft: -30px
       marginRight: -30px;
    }