将图像拟合成宽旋转木马保留纵横比

Question

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

这可以使用

完成

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

我想将图像的中心点与旋转木马的中心重叠。拉伸至100％后，进入的图像将高于旋转木马的高度。我希望它能同样溢出顶部和底部。

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

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

我试过的是添加带有负值的margin-top，这是不推荐的。 此外，我没有机会在CSS中进行计算。它应该只是稍微向上移动。

Example Code