Image Block

The Image enjin block has a seemingly simple task: display the image that the editor has chosen for the end-users to appreciate and maybe even learn something new from.

There's a lot of complexity behind this task ranging from cross-browser supports to the wildly large array of screen sizes used by modern users.

The image block provides a number of features beyond the simple display this image requirement.

The image block is backed primarily by the <picture> HTML tag (rather than just the normal <img> tag) which delivers a clean way for editors to specify which version of their image needs to be displayed at whatever their media-query needs are.

Image blocks can be configured for one of two constraints: width and height .

Use the link below to see a demonstration of the two different image block constraints.

Image blocks can have their images be fitted within their viewport: contain , cover , fill , none and scale-down .

Use the link below to see a demonstration of the two different image block fittings.

Image blocks can be configured for one of the following positions: center , top , top-left , left , bottom-left , bottom , bottom-right , right and top-right .

Use the link below to see a demonstration of the two different image block positions.

Image blocks can be configured for a range of viewport sizes (in the height dimension): sliver , thin , banner , normal , tall , huge and actual .

Use the link below to see a demonstration of the two different image block sizes.