RATE CARD!Pasang banner disini, dapatkan diskon 50%!

Personal Note: CSS Fluid Image Layout

Personal Note: CSS Fluid Image Layout

Brilliant article on fluid image layout by Ethan.  The technique allows for images to resize as the window resizes.  Similar fluid techniques have been around for content layout but nothing for images.  Most solutions required maintenance by the author to resize posted images to fit the column/row width/height restrictions of their website.  This was restrictive for both readers and authors where as a fluid image layout would help large images look good at high as well as low resolution.

   img {
   max-width: 100%;
   }

 

sample:

<img src="image-x.jpg" style="max-width: 100%;" />

 

The first step is taken by using the css property max-width.  Setting it to 100% allows the image to resize with the browser in standards compliant browsers (i.e. not IE).  See Ethan’s test case for fluid images here.

I’ve been meaning to clean up and do a fluid style design for my blog for a while now.  This in combination with Ethan’s other fluid grid design article over at a list apart might be enough to get me started.

Thx, source by: jesse.bilsten.net

Print Friendly, PDF & Email
pasang banner premium
Di tulis oleh: | Tags:
Kategori: CSS | No Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Please komentar yang nyambung yaaa dengan topik postingan saya diatas!, jangan spam! Ayo buktikan kalau anda adalah manusia! * Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.