javascript - Qualtrics 中的图形自动调整为参与者的屏幕？

Question

我正在寻找类似于 mousetracker 的模型调查者在两个选项中选择一个。我已经弄清楚了实际的鼠标跟踪代码。我的问题是创建参与者可以选择的图像。如果我把它做得太小，选择之间就不会有太大的可变性。如果我把它弄得太大，使用小屏幕的参与者将不得不滚动才能看到两张图片，调查的重点将毫无意义。

有没有什么方法可以在 CSS 或 Javascript 中编写代码，使图像拉伸(stretch)以适应其各自的浏览器/屏幕？我已经找到了适用于背景的代码，但不幸的是这不起作用，因为会有一系列不同的图片。

谢谢!

Answer 1

您可以使用 vh/vw 设置图像的最大宽度/高度 units . 1vh 是视口(viewport)(浏览器窗口)高度的 1%，1vw 是视口(viewport)宽度的 1%。

例子:CSS: .fit {max-height: 60vh;}

HTML:<img class="fit" src="x">

(您可以在 Qualtrics here 中找到如何添加自己的 CSS。)