How to disable zoom in and zoom out of pictures in browser and Applications?

your question have answers miscellaneous and different you should know how to ask clearly and  must be more specify about your question...

First at all , that is depend on which browsers or web applications you want to test

for web applications

prevent the user from being able to zoom:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

that's in html page but if you have style sheet file as style.css and linked with your html page, I think the best way to disable zooming,you should use @media property to specifying dpi of most popular (width:device-width) to open your RWD (responsive web design)...

the meta tag <viewport> usualy use for mobile browsers

for web applications in javascript elements

just type this code it worked on mobile and desktop computers..

<script>(function(){setInterval("document.body.style.zoom=1/window.devicePixelRatio",1);var viewport=document.createElement("meta");viewport.id="viewport";viewport.name="viewport";viewport.content="width=device-width, initial-scale=1";document.body.parentElement.children[0].appendChild(viewport);})()</script>

as web developer my opinion you should allow Zooming basicly,Why?

Originally my opinion was people only used to zoom on mobiles because the site wasn't designed to work on a mobile, but that's not the case with a well designed RWD site' however some user testing that was happening but also from the general principal of putting the user first.

You don't know why the user wants to zoom. It could be any number of reasons, may be

•They want to view an image in more detail•The are trying to select a word / paragraph to copy and use elsewhere so zoom in to get a closer view and make selection easier•They want to read a particular area of content that is too small for them to view so zoom in to do so•The resolution of different mobile devices is not standard, so just because it's a 4" screen doesn't mean the text is as clear on all 4" devices.

------------------------------------------------------------------------

for browser you can disable zooming for example  in IE settingOpen Internet Explorer on the Desktop.......

Tools

Internet Options

Advanced (tab on top)

Accessibiity

CHECK the  box "Reset zoom level for new windows and tabs"

Click APPLY

Click OK 

 If you are comfortable doing a registry edit.........

Windows Key + R

enter regedit and click OK

HKEY_CURRENT_USERS\\SOFTWARE\\Microsoft\\Internet Explorer\\Zoom

In the details pane, double-click ZoomFactor

Click Decimal.set the default zoom level to100%,

type 100000, and then click  OK.

Close the registry and restart the computer  

------------------------------------------------------------------------in Firefox 

enter about:config into the firefox location bar (confirm the info message in case it shows up) and search for the preferences named browser.gesture.pinch.in & browser.gesture.pinch.out - doubleclick those two entries and change their value to false. or alternatively you could try setting zoom.maxPercent & zoom.minPercent to 100

that's for most popular web browsers and so on for the rest (chrome, safari, Opera) 

that is all if you are looking for!!!!!

Basm allah alrahman alrahim

for web developers :

look to this stackoverflow answer , it is like abdulmajed and abdelbasset answers .

if you want pictures only to stop zomming make static layout or static image

For browsers users :

Firefox

1 - about:config

2 - browser.enable_automatic_image_resizing

3 - false ( but be carfule)

chrome

Google Chrome/Chromium/Canary version above 50:

chrome://flags/#touch-events

Google Chrome/Chromium/Canary version less then 50 or old versions:

chrome://flags/#enable-pinch.

Note it will be highlited with yellow

Also you can use

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

You can't (disable zoom in and zoom out).

You can use:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Place below code above the head tag

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Also set class of each image as "img-responsive". make sure that you had added references to bootstrap files.

Finally set width and height of each image in pixels in style sheet and don't keep it as auto.

Disable Zoom on your webpage using html Meta Tag

<meta content='True' name='HandheldFriendly' />

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

1.On desktops, there is no auto-zoom, so when users come to your website, they see it exactly as it was meant to be seen.

2.Check this site using mobile phone you will see in action of disable zoom In using meta tag

https://davidwalsh.name/demo/mobile-viewport.php

you can do this in css

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">