在css中裁剪图像，保持纵横比并居中

Question

将图像合并到div中并保持纵横比并不难。但试图将选定的区域保留在图像的中心是最困难的部分。 发生什么事是，图像会缩小到左上角，而我希望它保持在中心位置，因为人们经常拍摄照片中心最大景点的照片。

这是我现在使用的代码：

.cover-photo { 
width: auto; 
height: 60vh; 

background-color: lightgray; 

position: relative; 
margin: 60px 0 0 0; //There is a header above this div 

overflow: hidden; 
background: url('../Img/cover_photo.jpg') no-repeat center center; 
background-size: cover;} 

它应该是像Facebook的个人资料的封面照片。如果您有任何建议或解决方案，我希望听到他们的意见。

Answer 1

您可以使用不同类型的方法，而不用担心应该放大哪个区域？使用jquery图像裁剪机（有许多这样的plugins）

demo

https://github.com/scottcheng/cropit/