Template:Large image

From Wikisource
Jump to navigation Jump to search
Documentation icon Template documentation[view] [edit] [history] [purge]


Usage[edit]

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[edit]

  • 1 or file: 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 alt as normal. You do not need to specify centre
  • max-width: 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).
  • style extra CSS to apply to the wrapper div element. Can be used for border, padding, margins, etc.
Standard usage
{{large image|[[File:The Station-Master at Longley.png|500px]]}}

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

Examples[edit]

Basic usage[edit]

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

<!-- Note: the green div is to simulate the container only. You do not need to add your own div in normal usage -->
<div style="width:100%; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|500px]]}}
</div>

The Station-Master at Longley.png

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:

<div style="width:300px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|500px]]}}
</div>

The Station-Master at Longley.png

Max-width[edit]

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

<div style="width:800px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=50%}}
</div>

The Station-Master at Longley.png

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

<div style="width:400px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=50%}}
</div>

The Station-Master at Longley.png

Relative image sizes[edit]

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:

<div style="width:500px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|200px]]|max-width=67%}}<!-- 100% * 2/3 = 67% -->
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=100%}}
</div>

The Station-Master at Longley.png

The Station-Master at Longley.png

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

<div style="width:200px; border: 1px solid green">
{{large image|[[File:The Station-Master at Longley.png|200px]]|max-width=67%}}<!-- 100% * 2/3 = 67% -->
{{large image|[[File:The Station-Master at Longley.png|300px]]|max-width=100%}}
</div>

The Station-Master at Longley.png

The Station-Master at Longley.png

Score[edit]

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.


{{large image|
<score>
	 \relative c' { 
		e16-.->a(b gis)a-.->c(d b)c-.->e(f dis)e-.->a(b a)
		gis(b e)e,(gis b)b,(e gis)gis,(b e)e,(gis? b e)
	}
</score>
}}

	 \relative c' { 
		e16-.->a(b gis)a-.->c(d b)c-.->e(f dis)e-.->a(b a)
		gis(b e)e,(gis b)b,(e gis)gis,(b e)e,(gis? b e)
	}

See also[edit]

  • {{img float}} for "embedding" small images in surrounding text.