How do I ensure that an image is fluid and will resize? -


i trying use css ensure image on page resize if screen below resolution or window below size. have read use {max-width:100%}, have incorporated code, image isn't resizing @ all. image 500px wide.

thank you!

css , html:

.left{ float:left; width:600px; }  .right{ float:right; width:400px; }  #logoimage{ width: 100%; margin: 50px auto; max-width: 100%; }  #navbar{ text-align: center; font-family: 'special elite', cursive; color:white; font-size: 80px; font-style: bold; display: block; margin: 60px auto;  }  <body> <div class="left"> <div id="logo"> <img src="/pictures/logo.png"> </div> </div>   

your css id logoimage not being applied anything. have img element, has no id specified. change <img src="/pictures/logo.png"> <img id="logoimage" src="/pictures/logo.png" /> take effect.

also, there's no point setting width 100% , max-width 100%. it's redundant. either set width 100% ensure element 100% width, or set max-width 100% ensuring element auto-width up to maximum of 100%.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -