Template:Large image/doc

Usage
This template produces a large image that will not exceed the width of its parent container. If the image is larger than the parent width, it will scale down to fill, but not exceed, the parent automatically.

Parameters

 * or : A Mediawiki image markup for the image to insert. Use the "native" size you'd like to see when the image is "unconstrained" by the parent. Also use  as normal. You do not need to specify
 * : Use this if the image should not take up the whole parent width. Can be useful for maintaining relative image sizes (in which case make sure the ratio between the max pixel sizes and the max-width parameters is the same).
 * extra CSS to apply to the wrapper div element. Can be used for border, padding, margins, etc.


 * Standard usage:

There is no support for captioning. Use normal formatting (e.g. center, smaller, etc) to achieve this.

Basic usage
This produces a 500px image when there is no width limit in the surrounding container:

However, if the surrounding container is smaller than 500px (for example a small screen or small window, or the user has applied a narrower Dynamic Layout), the image will scale down naturally:

Max-width
When the page is very wide, the image's "own" size is what is shown (300px):

In narrower containers, the max-width is what determines the size (50% of 400px = 200px):

Relative image sizes
By keeping the ratio between the max-width parameters and the ratio between the nominal image sizes (in px) the same for multiple images, their relative sizes can be maintained, even when some or all of the images are constrained by the parent width.

For example, a 200px and 300px nominal image in an unconstrained parent have a 2:3 ratio when unconstrained. To maintain this ratio, the max-widths should also be in a 2:3 ratio. If you want the larger image to be 100% width, then the smaller one should be 2/3 of that: 67%.

Unconstrained (500px parent width) gives a 2:3 ratio of widths:

Constrained (200px parent width) still shows the images at the same sizes relative to each other (2:3):

Captions
The template does not have direct support for captions, instead leaving this up to the user to specify styling suitable for the work in question.

You can add text to the template body to place text in the container div, where it will inherit the centre-alignment of the parent container.

Score
Musical score can be place in this template to constrain its size just like an image. If the container is very small, it might make the image too small. Use with care.