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.
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.
- Another page with a 90% image width
- Menu Systems - The harmony between navigation and imaged
- The importance of auditing your website
- Photo Gallery - should your website need one - Mexican Alebrije
- Floating Images and wrapping text - CSS - I use clearfix on my page on Heraldry
- Responsive Image Grid
- Clearfix - clear child elements automatically without any additional markup
- Responsive Web Design Made Easy
- How TO - Center Images 🔗 W3C Schools