Saturday, September 27, 2014

Lets have a look at a simple way to make images scale responsively in a webpage in response to the device on which the webpage is viewed. In the example considered below, the image will scale responsively to the required dimension, stay aligned to the center and will maintain its aspect ratio. If you are viewing this page on a desktop / laptop, try to resize the browser to smaller dimensions and you can see that the image will resize to the browser's width. In fact, all elements including the images on this site is designed to resize (i.e., show a responsive behavior) keeping in mind the responsive web design techniques.

Demo

(Resize your browser window)

This is achieved by wrapping the img element into a div section with style containing the property 'display' with value 'table' and for the property 'margin' we provide a value '20px auto' signifying that we need a margin of 20px on the top and bottom of the div section and let the browser calculate the left and right margins automatically so as the keep the div section centered horizontally. In the img tag make sure the width property is specified with a value set to 100%.

Code


6 comments:

  1. This is really an awesome article. Thank you for sharing this.It is worth reading for everyone. Very informative article. Keep it up.
    Web Design

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Wow, informative and useful to know about these scaling of images. Thank you very much. Coimbatore websites | kovai web solutions | best logo design company

    ReplyDelete
  4. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks.
    wordpress web design

    ReplyDelete
  5. The site is really beneficial for everyone to know about this topic. I think if you read blog than you will get some more information from blog. This is really useful blog.พรีเซนเทชั่น

    ReplyDelete
  6. I constantly like to read a top quality content having accurate info pertaining to the subject and the exact same thing I found in this article. Nice job. Web Design Agency Melbourne

    ReplyDelete