Template:Res-img/doc

This is a basic template that encapsulates the anonymous parameter  in the following:

The res-img or "responsive image" class causes img elements to scale to the width and height of their container. Images still retain their original aspect ratio, and will not grow to larger than their original resolution. The CSS class will also override common image styles that constrain the width or height of the image. This CSS is declared in MediaWiki:Common.css, and such can be used on mobile and desktop.

If you only need a responsive image, it is preferred that you don't use this template, and instead write the div out yourself. This template exists mainly for documentation purposes.

Parameters

 * 1 or content (required)
 * The content, should be a, within double square brackets. Note that if multiple images are within this parameter, only the first will be a responsive image. This is done to prevent cascading down to elements that shouldn't scale.


 * style (optional)
 * Style that should be applied to the res-img div element, e.g.


 * overlay (optional)
 * Any content that should be overlayed over the res-img (more specifically the img element). Content here will be given the class res-img-overlay and will be moved via JavaScript to have the same parent as the image element (precedes it). Items within this should have the style  and should be positioned width left, right, top and bottom, relative to the parent div of the image. Overlay feature is desktop only due to the use of JavaScript.


 * overlay-style (optional)
 * Style that should be applied to the overlay container element, e.g.

Responsive ImageMaps
ImageMap is an extension that allows you to have clickable links on certain parts of an image. Coordinates are pixel based relative to the full size of the image, and by default do not scale if the size of the image changes.

By using res-img, maps and area elements contained within them are able to be scaled with the size of the image. This is accomplished with a combination of JavaScript and CSS (see MediaWiki:Hydradark.js, MediaWiki:ResponsiveImageMap.js and MediaWiki:Common.css). Imagemaps that are contained within a res-img have their coordinates adjusted on the window resize event, but only if the image size actually changes. The imagemap syntax and declaration is identical, in that coordinates are pixel-based relative to the full resolution of the image.