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.