将图像拟合成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个人资料的封面照片。如果您有任何建议或解决方案,我想听听。