Hi Oliver_Durcan,
Preface: I'm assuming by wanting the images the "same size", you are talking about the relative size of the image on the screen (as opposed to the absolute size of the image in reality). If you're going for absolute size, I'm honestly not sure how to approach it (due to different screen resolutions, pixel density etc).
===
Detecting zoom level is very difficult and there is no universal option that will work across all browsers. If your use-case restricts users to a certain browser(s), you might have a chance at implementing an existing solution (if there is one).
You'd have more luck scaling the images according to the view height / view width of the browser.
Here are some examples:
These examples are using text, but you can use vw and vh on images as well. Eg:
https://www.w3spaces-preview.com/bgoold/saved-from-Tryit-2022-05-20.html===
As far as applying to your survey is concerned, I would suggest trying to write some code which gives each image a custom CSS class and then set up custom CSS for the appropriate vh and vw dimensions:
//JavaScript in Survey questions
jQuery("#"+this.questionId+" img").addClass("face");
//custom CSS
.face {
"height": "40vw", //you may need to experiment with these values
"width": "20vw"
}
If your images have different proportions to one another though, you may not have the luxury of using a single CSS rule and will need to calculate the appropriate width/height in the code instead... which is admittedly becoming quite complex.
Good luck!
Hi bgooldfed
Thanks for the help here.
Actually, I'm not looking to achieve the 'relative' image size to the screen - I'm looking for the 'absolute' size! All of the images are the same px-width/height, but I am trying to ensure that they have consistently equal dimensions on screen between multiple devices (ie. they are all the same size as a credit card if you were to place the credit card on every participants' screen).
Hopefully, someone else will have some ideas!
Thanks
Oly