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

Question

我有一张封面资料照片，可以在我的网络应用中更改，例如facebook封面资料照片。我已经实现了使用>>> aa = "ā" >>> bb = "ā" >>> aa == bb False >>> >>> aa.encode('utf-8') b'\xc4\x81' >>> bb.encode('utf-8') b'a\xcc\x84' 插件重新定位照片的功能，并且还实现了上传新的照片功能。

重新定位这就是我的进展方式：

• 在表单上添加隐藏的输入字段并保存最新的jquery UIdraggable值

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

例如，这是我的电脑屏幕上的一个案例，其顶部设置为top

这就是我在移动视图中的内容：

我的电脑屏幕上的每件事都很好用。问题是，在小型设备上，它与我重新定位的照片位置不同，而在某些小型设备上拖动照片存在一些问题。

有人有anidea如何纠正这个？ 或者还有其他插件可以做这件事吗？

提前致谢。

Answer 1

我建议您使用CSS而不是JS。您可以将图片设置为background-image

属性并使用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%;
}