====== Featured image ======

There are several views of the featured image, each can have different dimensions so it is usually important to place the image focus in the center.

When the image does not fit the container around it, it is cropped either on sides or on top and bottom.

Moreover the featured image can have two layouts inside an article detail.

Following are definitions of the featured image sizes in various contexts:

===== Listings (Homepage, category view and similiar) =====

Aspect ratio: 16/9 (width = 16 points, height = 9 points)

Examples:
  * 160 x 90
  * 1024x576
  * 1920x1080

The first position in the grid has special behaviour for desktop and mobile:

==== First position: Mobile ====

Aspect ratio: 1/1 (width = height)

Examples:
  * 160 x 160
  * 1024x1024
  * 1920x1920

{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-promo-small.png?100|}}
==== First position: Desktop ====

Due to the layout in the desktop view, the first article position must be slightly offset from the 16/9 aspect ratio, therefor the image has an extra few pixels at the bottom.

Examples:
  * 1920x1080 would have extra 25 pixels at the bottom and would need to be 1920x1105.5 px
  * 1024x576 would result in 1024x590
  * In the desktop view, the image has a size of 792x456

The following image demonstrates the extra spaces that is needed in order to match the height of the two images next to it:

{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-promo-extra-space.png?100|}}
===== Detail (Fixed layout) =====
Aspect ratio: variable

Width: scales with browser width, limited to 1380px max

Height: 
  * Desktop: 600px
  * Mobile: 390px

At the highest resolution, the image has size of 1380x600 pixels resulting in an aspect ratio of 23/10

At the lowest resolution, the image has a size of 320x390 pixels, resulting in an aspect ratio of 32/39, or approximately 11/13

==== Examples ====

{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fixed-small.png?100|}}
{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fixed-middle.png?100|}}
{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fixed-large.png?100|}}

===== Detail (Fluid layout) =====

Aspect ratio: variable

Width: scales with browser width, no limit

Height: 
  * Desktop: 600px
  * Mobile: 390px

==== Examples ====
{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fluid-small.png?100|}}
{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fluid-middle.png?100|}}
{{:skoda-ep:skoda-wlc-2016:technical_information:featured-image-fluid-large.png?100|}}