Board Thread:Darwin - Fluid layout help requests/@comment-5556688-20131208143643/@comment-188432-20131209200003

I'd invite you to take a look at tardis:MediaWiki:Transmat.css for one possible solution. This allows images to change size on pages like tardis:Transmat:Locations. Of course, this solution is limited by the native size of the image, so it won't stretch images beyond their natural width. But you can see that it does work to shrink images quite effectively.

Although this CSS is working on all of the pages in our Transmat namespace, it's perhaps best seen in operation on tardis:Transmat:Locations, because this shows it working really well as browser width collapses, but also shows that native picture size is a limiting factor as the page width expands. Transmat:Location also features a wide range of native picture aspect ratios, and you can see that something like the widescreen "Bannerman Road" pic does much better stretching out than does the 4:3 drawing under "Other planets, other places".

For the moment I'm mostly cool with all this, since individual column width doesn't expand that much. Darwin does, after all, have an upper width limit and so columns don't expand grossly behind the width of most of our pictures.

I have not yet moved this notion out into the main body of the wiki, so images on our regular pages do not yet scale.

The issue of image "scalabilty" is a hot topic now in design and there are tons of pieces of advice floating around the interwebs, with several competing theories on how best to achieve it. What we've done at Tardis is to essentially wrap images in a div an then stretch that containing div. There are other solutions out there, but I've not tried them all.

The bigger image issue at Wikia at the moment is not really scalability, but the fact that the same picture is now used in multiple contexts, and the fact that it's practically impossible to come up with one picture that will work equally well in infoboxes, MyWikia, the new search engine, and the two totaly different formats inherent in the "Top articles" sidebar at Special:Search.

If you care about image quality at Wikia, scalability is only half of the major issues confronting us as we move forward.