Dynamic Image Sizing (to scale)

[bzorella]

Did you know that you can embed images in a unit that dynamically size, according to your page size?

This is ideal for embedding images into your Canvas unit that can be viewed on a mobile with no issues.

The embed code from the HTML editor will refer to the width and height of the image:

<p><img src="https://xxxxxxxxxxxxxxxxx/courses/22607/files/6877530/preview" alt="Adobe Creative Cloud by application" width="1000" height="1600" data-api-endpoint="https://xxxxxxxxxxxxxxxxx//api/v1/courses/22607/files/6877530" data-api-returntype="File" /></p>

If we change the width to be 100%, the image will dynamically resize depending on the resolution of your screen/browser window:

<p><img src="https://xxxxxxxxxxxxxxxxx/courses/22607/files/6877530/preview" alt="Adobe Creative Cloud by application" width="100%" height="1600" data-api-endpoint="https://xxxxxxxxxxxxxxxxx//api/v1/courses/22607/files/6877530" data-api-returntype="File" /></p>

[a_craik]

I have wondered about this Benji... do you know why Canvas elects to work in pixels rather than percentages, when surely the latter is preferable?

[bzorella]

Hi Adam,

I am by no means a Canvas expert, but generally web relies on using a defined pixel size for use in exact positioning of elements on a web page.

See: Web Layouts: pixels vs percentages

Percentage layout

This is generally referred to as fluid layout. Your elements will take a defined percentage of the total space available to them. This available space is determined by the element's parent.

When using percentage layouts, it's a good idea to specify a min-width and max-width on your design so that it remains usable at very low and high resolutions.

Pros

1. Scales with screen size, therefore get to use more space if it's available.

Cons

1. Makes it more difficult to know the exact position of something on screen. As a result, it can make creating precise layouts more difficult.
2. Can lead to unexpected layouts if child elements are fixed width (i.e. an image) and end up being larger than their fluid width parent.

Pixel layout

This is usually known as fixed layout. Your element will always be the same defined pixel size and will not take available parent space into account.

Pros

1. Always know an element's exact size.
2. Creating precise layout is easier.

Cons

1. You don't scale with resolutions. Your layout will always be the same width, making for wasted space when people have high resolutions.

Hope this helps!