Switch article image background-size from cover to contain

[medied]

Phabricator Link : https://phabricator.wikimedia.org/T244821

Problem Statement

Bigger size images at the article top are sometimes unrecognizable.

Solution

Updating background-size before and after results:

Before	After

[hueitan]

the changes made the lead image to be center, I personally prefer the original version of showing larger image

we will need design to decide how it should look like, some articles are larger in width or height

[hueitan]

as per the design, the lead image should be shown in 100% width at the top

[medied]

Yea I also thought about checking with design, it's probably only a small percentage of images that look unrecognizable with cover because of their size (like that USSR flag).

Another alternative would be setting the size to a specific pixel size, for example. This would be somewhat of a middle point solution, not sure how useful this would be. But again I'd take heed from design making the call. Examples below.

We should remember that either way when a user clicks on the gallery, they will be able to appreciate the image in its full size.

background-size: cover	background-size: contain	background-size: 400px	background-size: 450px

[stephanebisson]

I think the spirit of the background image is to give the first page "personality", not to show the image is all its glory, we have the gallery for that.

Since the images come in various sizes and ratios, most solutions include some amount of white space and look a bit broken.

[jpita]

what if we use the contain but stick the image to the top of the page?

this way we always show the image above the text

[medied]

Just heard from Sudhanshu today, he was able to check in and confirm with Carolyn: the design team says we should cancel this PR. Looks like similar conversations have been had before for Android and iOS.