Automatically Add Scrollbar To Overflowing Images
Posted at 8:06 pm on October 27th, 2008 in Tips & Tricks Hits: 1,527

Sometimes our very own web pages are designed in a way to accept static width of contents, this means when your images are to big in width than your web page design also becomes stretched off. To overcome this we can simply use simple CSS codes. This way images which are larger than the specified width wont get stretched, instead a scrollbar is added below the image.

Example:


What is being done here is that we have added the overflow syntax to the code with auto detection of the image overflow. Just specify a width for the DIV. Basically this value is the width of your page layout, so any image which is more than the width of the specified value, than a scrollbar will be added to the image. This will put the image in neat way on the page layout with a scrollbar added to view the overflown image.

The Code:

<div style="overflow:auto; width:500px;">
Put your image code here, or etc.
</div>

In the example above, any image or contents inside the DIV which is more than 500px in width will be added with a scrollbar leaving the page layout intact. This code should work fine with both IE and also Firefox.


|

 
About Me

I'm ramesh from Perak, Malaysia. Blogging is my hobby hence this blog is my second home to share my life, interests and etc. One can always interact with me by using the mediums below.



Blog Menu

» Main Page
» Blogging ( 137 | rss )
» Info Tech ( 43 | rss )
» Mesh Views ( 3 | rss )
» My Mesh ( 17 | rss )
» My Poems ( 6 | rss )
» My Workshop ( 16 | rss )
» myIndians-World ( 45 | rss )
» Places & Events ( 62 | rss )
» Shoot Me ( 17 | rss )
» Tips & Tricks ( 21 | rss )
» Contact Me


Micro Mesh



Get Updates



 

page made and maintained by mesh