Images - Grid System

Overview

An image is a static two dimensional visual artifact that is a type of non-text content classified as decorative, simple, complex, or an image of text.

In order to accommodate multiple resolutions, grids automatically resize themselves. Text automatically word-wraps, but images are typically a fixed size. This can cause problems within a responsive grid system. To avoid such problems, images within a grid cell expand to fill 100% of the particular grid's width.

To override this feature, you may use the image-actual class.

Fluid width images

The examples provided use the same source file, which is a 220 pixels wide. The smallest span-1 version pinches the image at the corners; the largest span-3 version stretches, and blurs it. Therefore, the best grid to view the below sunflower image is within in a span-2 at 1024x768 resolution, as it is a perfect fit (optimal size for its placement).

<div class="span-1">
   <img src="images/a7.jpg" alt="" width="224" height="168" />
</div>

Fixed width images

If you do not want an image to stretch to 100% of the cell width, apply the image-actual class to the image. For example, if you view the 20x20 pixel check-mark image at 100% of a grid cell, it appears pixilated. The image-actual class ensures the image retains its width and height properties, and never visually distorts.

Undesired effect

The small images are being stretched to fit the full width of the grid cell.

<div class="span-1">
   <img src="tick.gif" alt="___" width="20" height="20" />
</div>
<div class="span-1">
   <img src="x.gif" alt="___" width="20" height="20" />
</div>

Desired effect

The images retain their default size.

<div class="span-1">
   <img class="image-actual" src="tick.gif" alt="___" width="20" height="20" />
</div>
<div class="span-1">
   <img class="image-actual" src="x.gif" alt="___" width="20" height="20" />
</div>