use background-size:cover on related images
Closed, ResolvedPublic


from: nirzar

A small fix if we can do in the future for the thumbnails (see attachment)

If we use background-size:cover;

The layout looks much better, less odd white spaces on left side. i couldn't find if some browsers don't support that property.

Also it will reduce the overhead of figuring out portrait and landscape and one more class related to that.

JKatzWMF created this task.Dec 10 2015, 9:26 PM
JKatzWMF updated the task description. (Show Details)
JKatzWMF raised the priority of this task from to Needs Triage.
JKatzWMF added a project: Reading-Web-Planning.
JKatzWMF moved this task to To classify on the Reading-Web-Planning board.
JKatzWMF added a subscriber: JKatzWMF.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptDec 10 2015, 9:26 PM
Jdlrobson set Security to None.

Here [1] is the compatibility table. Mobile browsers don't seem to support this feature well.


The support is good enough provided the fallback is the status quo.

This is actually technically a Cards issue, not Related Articles, I think.

Change 259193 had a related patch set uploaded (by Jhobs):
Use background-size:cover for thumbnails

Change 259193 merged by jenkins-bot:
Use background-size:cover for thumbnails

Jdlrobson closed this task as Resolved.Dec 15 2015, 1:21 AM

Unless the image is square it'll be scaled up when using background-size: cover;. The image being requested is still 80px wide, and thus looks blurry when not a square (very often). You'll either have to query again once you have the image dimensions, or just request for a larger image and hope for the best.

If there a way to get image proportions without requesting the image data, then you're in luck .

@Prtksxna has a point. I'd suggest we use a bigger thumb to avoid the blur. @Nirzar can you review and open a card with suggested image dimensions?

@Jdlrobson Definitely. I will create another card for image quality with spec. we can sign off on this one meanwhile.