Html 将图像拟合到宽旋转木马中，保持纵横比

我在主页上有一个bootstrap 2.3.2的旋转木马。它的尺寸是870像素×320像素。 传送带上显示的图像通常较薄，如620px×350px；我想将图像拉伸到全宽（870px），同时保持当前的宽高比

这可以通过使用

.carousel { height:320px; width:870px; }
.carousel  .item { width:100%; max-width:100%; height:320px;}
.carousel  img { width:100%; height:auto; overflow:hidden; }

我想将图像的中心点与旋转木马的中心重叠。拉伸到100%witdh后，传入图像将高于旋转木马的高度。我希望它能均匀地溢出顶部和底部

例如，如果我将620px×350px的图像拉伸到870px的宽度，新的高度值将大约为490px。从320px溢出高度中减去它将为170px。所以我希望它从顶部溢出85像素，从底部溢出85像素

图1是我拥有的，图2是我想要的

我所尝试的是用负值添加页边顶部，这是不推荐的。 我也没有机会用CSS进行计算。它应该只升一点点

---

您已经尝试过什么？如果你已经做了，我不想浪费你的时间来建议简单的潜在修复。你能添加一个codepen/jsfiddle吗？您将得到更快的响应。这里已经回答了这个问题：另一个解决方案，相同的问题：