html - Keep images with size set to percentage on the same scale with window resize -


i building web app. size of images set using percentages. have 3 images overlapping image used toolbar. when have images display browser on full screen, fine. however, when have them displayed screen smaller, ratio of image size screen seems change. can change this?

full size:full size version

smaller size version:

enter image description here

notice difference in size of icons.

my code:

<div id="bottombar" data-position="fixed">                     <img id="ico" class="foodico" src="images/icons/food1.png" width="3%">                     <img id="ico" class="shopico" src="images/icons/shop1.png" width="3%">                     <img id="ico" class="activityico" src="images/icons/activity1.png" width="3%">                     <img id="bbackground" src="images/icons/navbarbackground.png" width="100%" height="7.8%">                 </div> 

if set height set amount, won't become smaller unless container they're in has height attribute reduced.


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -