Magic max-width rule

Preface

CSS rule max-width:100% makes life easier. There is no need anymore to crop a few versions of one image if we want to place both thumbnail and full-size picture on the website. No need to add any script as well.

It is very easy to do: in css file it is just required to declare:

max-width:100%;

and every image will be automatically resized fitting the size of its wrapping box (as usual figure tag). Wrapping tag width should be declared in css file as well. If it is fixed layout–in pixels, if it is fluid (responsive) layout–in percents. Shortly to say it should look this way:

figure{
width:100%;
}
img{
max-width:100%;
}

Below comes an example, click bigger version of same image.

Image above: screenshot of my Halloween Horror Party web flyer template