在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/