在css中裁剪图像,保持纵横比和居中

时间:2015-04-03 13:36:08

标签: css html5 image

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

1 个答案:

答案 0 :(得分:0)

您可以使用不同类型的approch而不是担心我应该缩放哪个区域?使用jquery image cropper(有很多这种plugins

demo

<强> https://github.com/scottcheng/cropit/