Resizing an image using percent width web desing

Resizing an image using percent width web desing

1 Comment

Resizing an image web desing  Resizing an image using percent width web desing i  ndice

 

Resizing an image using percent width.

Diseño Web

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

Agencia de Posicionamiento Web - SEO con más de 25 años de experiencia.

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

There is no form with title: "SEOWP: MailChimp Subscribe Form – Vertical". Select a new form title if you rename it.

More from our blog

See all posts
1 Comment
    • streaming 6 hours of silverstone
    • septiembre 15, 2015

    I think the admin of this web page is in fact working hard for his site,
    as here every material is quality based data.

Deja un comentario