How to prevent images from resizing while changing the browser zoom by "Ctrl -" or "Ctrl +"?

Question

I am using a jQuery plugin for slider and want the slider images to remain unchanged if we change browser's dimensions. The website below is the inspiration for the effects.

www.beoplay.com

Answer 1

In Chrome/webkit based browsers you can try zoom: reset; CSS rule

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15

You can also try adding viewport relative units to your elements. https://caniuse.com/#feat=viewport-units

Answer 2

If you want to fix or freeze images, just give %age value of those image in pixels. This will keep it fixed irrespective of zoom in or zoom out.

You can use This tool to convert your pixels into percentage.

Hope I hope this helps.

EDIT : Alternative solution

I suggest you to use Media Queries. It will enable you to make the images to stay intact depending on the responsiveness.

You should apply media queries relevant to the images in issue.

I hope this helps.

Answer 3

There is no surefire way of doing this. The only suggestions that I could make will require extensive programming knowledge in javascript and even then, there is no guarantee this will work. Unless it breaks the page, I don't think you need to worry about this. Moreover you might just kill the user's experience by trying to prevent him from rescaling You can check this question for some solutions that might and I say this with a packet of salt might help

Catch browser's "zoom" event in JavaScript

Answer 4

if you want to keep the size of images fixed u can simply use css to keep width and height fixed ,also you can set the position as fixed which will help you to to keep the image from movement.

hope it helped