Javascript 为不同的桌面和移动视图调整图像大小

我有一个结构，在这两个视图中，桌面视图和移动视图的高度都是固定的，只有下面这样的图像

在移动视图中，图像被拉伸。 我已经应用了一些解决方案，可以从顶部、底部、左侧和右侧裁剪图像，在我的情况下，我不希望这样。

---

我应该如何继续，使图像在任何视图中都不会拉伸？

假设您想要固定的布局（如在图像中），您可以使用

背景图像

/

背景大小

并将其设置为这样

background: url(...) no-repeat;        /* the shorthand property */
background-size: cover;
background-position: center center;

cover

值使图像始终填充元素而不拉伸元素，并且使用

背景位置

可以控制图像是否应居中、左、右、下、上对齐

div{
高度：200px；
宽度：500px；
背景：url(http://lorempixel.com/300/400/animals/4)不重复；
背景尺寸：封面；
背景位置：中心；
边框：1px纯黑；
}
div~div{
高度：200px；
宽度：200px；
}
div~div~div{
高度：500px；
宽度：200px；
背景位置：左中；
}

背景尺寸的第一个解决方案：封面相当不错-唯一的问题是它会在图像中出现。无法使用contain，因为将显示一些额外的空间。谢谢你的帮助，你会有其他的解决方案吗？@pdjinn那么我不知道你想怎么做，因为你的裁剪、缩放或拉伸图像以适应特定的布局。。如果没有，那么您只需给

img

元素一个固定的高度，并将宽度设置为auto。这就是我一直使用固定高度和宽度的方式：100%拉伸图像，因为我的布局是响应的。是否有任何解决方案可以使用多个图像应用。宽度：自动将再次显示额外宽度space@pdjinn我用第三个样本更新了我的答案，与身高完全对应，没有裁剪或拉伸。你完全正确。所以基本上这是不可能的，因为宽度总是在不断变化，因为这是一个响应性的布局。我要么裁剪图像，要么拉伸图像。非常感谢你的帮助。我会在这里更新，如果我发现任何优化这一点