Web Design Notes: Images (Sizing)

Images come at a fixed aspect ratio and the simplest way to re-size them to your page is to specify either the width or the height but not both. The web browser will then render (display) the image according to your requirements. However:

Sometimes you need to fit an image into a pre-defined space on your page. This space will normally have been reserved through use of a DIV, you can choose to use background-image for the DIV or embed an IMG within it.

Background Images

An entire page BODY or any DIV can have a background image, the important CSS properties being:

url()Identifies the location of the image to be displayed, see the example below.
cover or contain Specifies the size for best fitting (expanding or shrinking) the image to the available shape. Cover: will match the best dimension and crop the image where it overlaps on the other dimension. contain: will ensure the entire image fits in the available space by padding in one dimension. Cover provides an image that is larger than contain's but cropped where necessary.

Note while cover often gives the best result, there will be no scroll bars to access areas of the image outside of the DIV (no matter your value for overflow). This is a background image after all.

An example statement structure might be:

<style>
.sFXD {display:block;position:fixed;top:0;right:0;bottom:0;left:240px;overflow:auto;}
.sBGI{background:#FFFFF0 url('images/example.jpg') center/cover no-repeat;}
</style>
</head>
<body>
<div id="Main" class="sFXD sBGI"></div>

The sFXD style defines the DIV base characteristics, while sBGI sets the background image. Remember to separate the image position (center) and size (cover) with a "/".

You might also prefer to set the image url via a style attribute on the DIV element itself e.g.

.sBGI{background:#FFFFF0 center/cover no-repeat;}

<div id="Main" class="sFXD sBGI" style="background-image:url('images/example.jpg')"></div>

or even programatically using javascript:

document.getElementById('Main').style.backgroundImage="url('images/example.jpg')";

Embedded Images

The advantage here is that we can fill or overlap the DIV container and use the CSS property "overflow" to determine if we shall allow scroll bars to view the entire image.

Using the width and height CSS properties (or less optimal the width and height html attributes for the IMG element), we can achieve effects similar to "cover" (see background images above) provided we know the orientation of the image:

WidthHeight
Landscape100%auto
Portraitauto100%

Note that "auto" is the default for height and width but if you are displaying both portrait and landscape images in the same DIV you will need to reset these properties as you switch from one image to another.

var objNew = getElementById('Main');
objNew.src = imgFldr+arrImg[ imgNdx][ 0];
objNew.style.width = "100%";
objNew.style.height = "auto";

Here arrImg is a two dimensional array containing the file names and the image orientation (not used in the example).

Note also that by reversing the width and height properties in the table above, we can achieve an effect similar to "contain".

 

 

If you have any comments or questions on this article then please e-mail us at "info@snys.nl". All helpful information will be added to the article. Please state if you would NOT like your name to be included in any update.