Fred Brack   Fred Brack  
Raleigh, NC
Picture of the Cape Hatteras lighthouse

Automatic Resizing of Images for Mobile Devices

This is an image 800px wide by 600px tall centered on the screen.


When the screen size is reduced (either by narrowing the WIDTH of the browser window OR because you are on a MOBILE device), the image size adapts to the maximum screen width.  In other words, for this particular image, when the available screen size is less than 800px, the image size reduces automatically.  This is accomplished by adding the following statement to a CSS file (or placed within <style></style> in the <head> section of your HTML as it is in this document as an example):

img { max-width: 100%; width: auto; height: auto; }

Note that there is no period in front of img above:  we are redefining the HTML element, not creating a class.  If you do this in a CSS file for your website, all images will be resized accordingly.  If you want a small margin or padding around your image, you can change max-width to something less than 100%.

CAUTION:  This technique will work whether or not width and height are explicitly specified for the image; however, it will not work if either you or your web development tool (e.g., MS Expression Web or Dreamweaver) have recoded the image width as style="width: nnn".  Also be aware that the default definition of the HTML5 figure tag adds a significant left- and right-margin, which you can override by specifying a style of margin: 20px 2px, for example, on the figure tag or override the figure element in your CSS, as I do.