Page MenuHomePhabricator

Images get squashed
Closed, ResolvedPublic

Description

https://m.mediawiki.org/wiki/Z%C3%BCrich_Hackathon_2014/Geo_Namespace

A max width applies to this image but no height auto so the resulting image gets squashed.


Version: unspecified
Severity: normal

Details

Reference
bz62460

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:55 AM
bzimport set Reference to bz62460.
bzimport added a subscriber: Unknown Object (MLST).

Created attachment 14778
yikes

Attached:

Screenshot_2014-03-09-13-43-37.png (1×768 px, 501 KB)

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Mingle card https://wikimedia.mingle.thoughtworks.com/projects/mobile/cards/1756

So the reason this was removed is it conflicts with .ve-ce-protectedNode-shield whis is an image and needs to be able to set its height...

Change 118401 had a related patch set uploaded by Jdlrobson:
Don't squash images

https://gerrit.wikimedia.org/r/118401

Change 118401 merged by jenkins-bot:
Don't squash images

https://gerrit.wikimedia.org/r/118401

At dewiki we have similiar report for https://de.m.wikipedia.org/wiki/Vorlage:QS-Chemie
with this user-provided image: https://commons.wikimedia.org/wiki/File:Darstellungsfehler.png

I could reproduced myself only with chrome, but with above fix from Jdlrobson applied via Developer Tools the image only shrinks normally but to a so tiny size you can't see it anymore. Firefox displayed the image normal in mobile view.

It only displays normal for me if I disable the "max-width: 100% !important;"-Rule

Yeh, although this patch unsquishes the image, the shrinkage is unrelated to this patch and is confusingly due to the fact that the table cell that contains the image has no declared width. Tables are pretty problematic on mobile (see bug 36936).

If you can I'd recommend moving away from using a table for this template. You can instead use a background image on a DIV like so:
<div style="

padding-left: 52px;
background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/4/42/QS-Chemie-Logo.svg/50px-QS-Chemie-Logo.svg.png);
background-repeat: no-repeat;

"></div>
Otherwise you can declare a width on the TD element to override the shrinkage.