2

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

Ogre Codes
  • 18,693
  • 1
  • 17
  • 24
tamnana
  • 41
  • 1
  • 7
  • 1
    Don't do that, it's bad usability practice, your inspiration also allows me to zoom btw. – Tdelang Aug 12 '13 at 10:24
  • 1
    It is the requirement actually. – tamnana Aug 12 '13 at 10:26
  • please refrain from just posting a link to your website as it usually gets you a flag and the question closed. The question is also tricky to understand because in the title you talk about zoom and in the question you talk about the browser dimension (which I assume is the viewport) – sulfureous Aug 12 '13 at 10:26
  • Have you tried using media queries?? - @sheebayousuf – Nitesh Aug 12 '13 at 10:28
  • novice user uno, thanks for the advice. I actually use ctrl -- to see the effects.@sulfureous – tamnana Aug 12 '13 at 10:28
  • Then google it and use media queries only specific to your issue i.e slider. - @sheebayousuf – Nitesh Aug 12 '13 at 10:29
  • @NathanLee i am not talking about responsiveness indeed images should remain unaffected by pressing ctrl-- or ++. – tamnana Aug 12 '13 at 10:30
  • If the user decides to zoom the whole page in/out, then the user _wants_ to zoom _everything_ – so this “requirement” should just be rejected as invalid. – CBroe Aug 12 '13 at 10:30
  • But the responsiveness is the only way by which you can keep your images unaffected when the user zooms in or zooms out. You don't have to apply responsiveness to the whole part just to the images only.- @sheebayousuf – Nitesh Aug 12 '13 at 10:33
  • yes Nathan Lee you are right, i was confused a bit over it. – tamnana Aug 12 '13 at 10:55
  • i hope i can get away with the nightmare, going try your suggested link, thanks for the help. – tamnana Aug 12 '13 at 11:07

4 Answers4

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

Community
  • 1
  • 1
SoWhat
  • 5,564
  • 2
  • 28
  • 59
1

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.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
0

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Maria
  • 548
  • 2
  • 8
-1

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

Rahul
  • 1,181
  • 1
  • 11
  • 20