具有特定坐标，比率的图像上的固定图像？

Question

我设法在我的网站上有一个图像，通过将鼠标悬停在特定位置，它会将其他图像附加到这些空间中的绝对位置。

以下是它的样子：

以下是将鼠标悬停在空格上后的样子：

唯一的问题是，当我调整宽度较小的窗口时，图像的放置方式不会超出宽度：

如您所见，图像超出了背景图像。

这是我实施的脚本：

FATAL EXCEPTION: main
java.lang.NoClassDefFoundError: rx.subjects.PublishSubject
at com.mlsdev.rximagepicker.RxImagePicker.requestImage(RxImagePicker.java:29)
at br.com.deway.imeeting.PortalColaborador.Login.Guardiao.GuardiaoActivity.pickImageFromSource(GuardiaoActivity.java:340)
at br.com.deway.imeeting.PortalColaborador.Login.Guardiao.GuardiaoActivity.access$200(GuardiaoActivity.java:80)
at br.com.deway.imeeting.PortalColaborador.Login.Guardiao.GuardiaoActivity$4.onClick(GuardiaoActivity.java:320)
at com.android.internal.app.AlertController$AlertParams$3.onItemClick(AlertController.java:934)
at android.widget.AdapterView.performItemClick(AdapterView.java:301)
at android.widget.AbsListView.performItemClick(AbsListView.java:1280)
at android.widget.AbsListView$PerformClick.run(AbsListView.java:3071)
at android.widget.AbsListView$1.run(AbsListView.java:3971)
at android.os.Handler.handleCallback(Handler.java:615)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:4960)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1038)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:805)
at dalvik.system.NativeStart.main(Native Method)

我使用比率来调整图像大小以适应屏幕宽度但奇怪的是，我的窗口宽度越小，超越越高。

你有什么想法吗？

Answer 1

这个小信息很难回答。您提到使用比率来调整图像大小，但您的功能是使用固定大小的像素

'width:'+ imgWidth +'px;'

我看到您正在使用以下内容指定宽度值：

var taillePhotoX = $(this).outerWidth();

但这与窗口大小无关。它取决于图像，并且在不同的窗口中保持不变。

您可以使用：

var taillePhotoX = $(window).width() // * (times) proportion ratio calculation;

使其相对于浏览器窗口。

此外，如果您拥有有限数量的重叠图像（您的代码仅考虑5），您可以使用类来定义它们在不同屏幕尺寸（包括过渡）中的外观。然后，让函数简单地相应地分配适当的类。