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

mod rewrite - Using "?" when rewriting the URL -

.htaccess: Transfer name to index.php if not directory public -

Admob integration with pygame in android -