Browser resize issues with javascript and css

Question

I have a grid of images which is created via angular... Each image is separated by a particular margin and the entire grid is centered in the page via auto margins. When the browser is resized, so too is the number of columns present so that a full amount of columns(none get cut off) are present. There is also a couple fixed links at the top right. All works great. However if the user changes the zoom level below 100% the javascript code still thinks there are one more columns than there is actually room for(and it always seems to be off by no more than a pixel or two.)

I'm thinking I need to be able to access the browser zoom level and make a minor adjustment to hardcoded values(although this should not be necessary on browser level zoom as everything should be downsized) For some reason it does not happen on zooming in (ie 110% image unnavailable as I can only upload two links)... You can see at 90% the container for the columns thinks there is a full extra column however the columns do not fit.

Viewed at 100% Viewed at 90%

UPDATE: I have found the slider panel(containing element) at 100% a 4 column grid would need a width of 1248px at 90% a 4 column grid would need a width of 1249px at 75% a 4 column grid would need a width of 1251px and at 67% a 4 column grid would need a width of 1252px

Still trying to figure out what is creating this pixel size difference at different zoom levels.

UPDATE 2: This issue is present in Firefox and Chrome, but not IE or Edge

Answer 1

Have you tried using flexbox? Unless you are needing to support older browsers, it would be able to place the images centered based on their size and you could set a max-width/min-width, which would then make flexbox wrap the photos.

Hard to really say without seeing the code layout though.

Answer 2

if you really dont want the user to zoom. Just add this meta tag

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

this stops from user to zoom the viewport