Tempusfugit UK

Image Handling

A css technique that I am using. In my Responsive design, images are placed in "content" containers which are centered and scaled to 95% of the div (container) width.

Belchamp Hall and St Mary's Church

The image above should pretty much fill the screen in both desktop and mobile viewing.

Currently I have two ways of centering images on my pages. There are probably more ways but what I have works in my Resposive design. In the menu I currently have a Social Media button (this may well be removed, but it serves as a good test for the moment). To center this image I simply enclose it in a paragraph tag with the class="center" or class="center50". The main images in the "content" section of the pages are centered using the CSS technique discussed in detail on the W3C Schools website.

The image in the menu is not scaled (if there is one), the image in the body is scaled to 95% (currently) of the width of the container.

What I did prior to this

I always had a problem in sizing my images for "mobile friendliness". To this end I first tried to size my images so that they didn't fall outside the screen width of a mobile device. This, I found was the wrong approach as the width HAS to be proportionable to the screen width. The W3C Shcools page describes this but I have only recently discovered it!

The responsive design (rwd.css) should control the display and the image in both the Smartphone and desktop screen widths.

Testing testing testing

As I have said many times before the changes that you make to fundamental items in your web design have to be checked in as many places as you can think of. If you don't find an error your users surely will. It is during the construction of new pages that I learn new techniques, mainly something to do with CSS, making changes to other exisiting pages and then re-checking them against the W3C validator I find that I have inadvertantly broken something. These things need to fixed at the time.


External Sources

Image Handling