Resizing an image using percent width.
This method relies on client-side coding for resizing a large image. It serves only one image to the client and asks it to render the image according to the size of the browser’s window. This is usually the preferable method when you are confident that the clients have the bandwidth to download the image without causing the page to load slowly.
Getting ready web desing
First you will need an image. To find a high-quality image, use Google Image Search.
A search for robots, for example, the search gives me 158,000,000 results, which is
pretty good. However, what I really want is a large image, so I click on Search tools, and then click on Any Size, which I change to Large. I still have 4,960,000 images to choose from.
The image should be resized to match the largest scale viewable. Open it in your image-editing software. If you don’t have an image-editing software already, there are many free ones, go get one. Gimp is a powerful image-editing software and it’s open source, or free to download. Go to http://www.marketingweb.com.mx to get this powerful open source image-editing software.
How to do it…
Once you have your image-editing software, open the image in it and change the image’s width to 300px. Save your new image and then move or upload the image to your web directory.
Your HTML should contain your image and some text to demonstrate the responsive effect. If you do not have time to write your life story, you can go back to the Internet and get some sample text from an Ipsum generator.
<p class="text">Loremipsum dolor sit amet...</p> <div class="img-wrap" >
<img alt="robots image" class="responsive" src="robots.jpg" >
<p>Loremipsum dolor sit amet</p> </div>
Your CSS should include a class for your paragraph and one for your image and an image wrapper. Float the paragraph to the left and give it a width of 60%, and the image wrapper with a width of 40%.
p.text {
float:left;
Web Desing