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
Post a Comment