Jul 11
1
CSS Resize Image
Leave a comment »
Resizing images on the fly can be done through inside your code but it consume a lot of time. I will show you a tip in resizing images on the fly using CSS. It is a pretty simple yet powerful.
Here’s the code:
<style type="text/css">
.newsize{ max-width:100%; height:auto; }
.newsize { width:auto; max-height:100%; }
#gallery{ width:200px; height:200px; }
</style>
How to use it?
In your HTML code just write:
<div id="gallery"> <img src="http://domain.com/iamges/myimage.jpg" class="newsize"> </div>
That’s it and you are done!
How it works?
Latest browser write now knows already how to resize images that is a new way to display images in your website. The browser will first get the maximum width and height of your placeholder which is the <div> tag. Then it’ll put your image on that div without loosing it ratio so your image will not look so distorted.
Happy coding!
Your Guide to Wireless Internet
and High-Speed Internet Providers
and Technology
www.wirelessinternet.net
