Html 使用背景url在div元素中定位整个图像，而无需拉伸

我使用一个div元素来使用背景url呈现图像

当我的用户上传他们的图像时，他们的脸在上面摆姿势，在div元素上渲染时，他们的脸会被切断。我也尝试过使用top center，但它会影响其他上传图片的用户，他们会将自己的脸摆在中间

你能给我一个解决方案吗？在这个方案中，一个人的整个形象应该显示在div元素上而不拉伸，即使他们的脸在顶部、中部或底部。那太好了，谢谢

我的代码示例：

background: rgba(0,0,0,0.7) url(/image_vhpf1m.jpg) no-repeat center center;
background-size: cover;

---

下面是所有添加动画的示例

.a4{background-image:
url('http://vignette3.wikia.nocookie.net/halofanon/images/4/46/Snowfall.png/revision/latest?cb=20100703100537');
background-repeat:no-repeat;
background-size:100% auto;
width:50%;height:100px;margin-left:50%;
box-shadow:5px 4px 16px mediumpurple;}

左边的图像只是一个设置为原始大小的img标签

右边的有他们的BG属性。 单击它们以查看调整大小时发生的情况。 链接

---

如果不想拉伸图像。为什么不做背景尺寸：包含；我尝试使用背景大小：contain；但是图像变得非常小，不适合div元素。有一些javascript人脸检测库可以使用。尽管如此，我认为这对于你想要实现的目标来说是非常沉重的。当你的用户选择一张图片时，让他们自己用裁剪库裁剪图片，然后上传图片。不确定你希望如何实现这一点。如果要在整个空间中显示图像，可以使用背景大小：100%100%；但这显然会根据用户的图像大小拉伸图像。这就是为什么你看到大多数网站使用图像裁剪，这样用户就可以裁剪他们的图像以适合他们想要的方式。您可以在此处查看一些jquery插件，否则您可以选择背景大小cover和contain。请尝试使用css3 clip属性