Handling Images with 'fit' and 'stretch'

Images can be placed onto a page in TERMINALFOUR in two ways: Through a purpose-built content type, or directly placed inline with a page's content. Since responsive sites change size, it can be difficult to place images inline and have them appear correctly on all devices--the screen size differs, but the image size does not, so often images hang off the page or push other content around in unexpected ways.

To simplify inserting images directly into content, authors may use the "fit" and "stretch" classes by double-clicking the image in their editor and typing "fit" or "stretch" into the "class" field, then pressing "Update." Both of these classes ensure that the image will not overflow the screen regardless of the viewing device.

"fit" causes an image to display at its normal size when there is enough room for it, but contract when screen conditions become tight.

"stretch" causes an image to expand to the full width of the content area under any conditions, even if that width is wider than the image.