如何根据封面照片的div高度和所选位置调整图像大小？

Question

我有一个封面个人资料照片，可以在我的Web应用程序中进行更改，例如facebook封面个人资料照片。 我已经实现了使用jquery UIdraggable插件重新定位照片的功能，并且还实现了上传新照片的功能。

对于重新定位，这就是我的操作方式：

• 在表单上添加一个隐藏的输入字段并保存最新的top价值

• 加载页面时， top值设置为数据库中保存的值。

例如，在我的PC屏幕上，顶部设置为top: -166px;

这是我在移动设备视图上所拥有的：

在我的PC屏幕上，一切正常。 问题是在小型设备上，照片的位置与我重新定位的位置不同，而是在某些小型设备上拖动照片存在一些问题。

有人有想法如何纠正这个问题吗？ 还是有其他插件可以执行此操作？

提前致谢 。

Answer 1

我建议您使用CSS而不是JS。 您可以将图像设置为背景图像

属性，并使用background-size属性对其进行配置

Answer 2

使用此简单的背景属性

 background: url("images/image-name.jpg")no-repeat center;
 background-size: cover;

Answer 3

您可以这样做而不是背景。

img {
  height: 200px; //your preferred height
  object-fit: cover;
  object-position: center;
  width: 100%;
}