 |
Fred
Brack Raleigh, NC |
|
|
|
Fred
Brack Raleigh, NC |
|
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.