Fluid is the new Black goes the saying of the day, but for Botzilla the main message is: get over it.

By that, I mean that if the site needs to work on all possible screen sizes, for future-friendly leanings, then: the pictures are just going to have to be small. And there's the rub for a photo site -- when the pictures are reduced to being upgraded versions of the thumbnails, not the other way 'round. This is tough, and frankly I won't give up without a fight for getting the best possible photographic presentation into place.

At the moment, I'm getting cozy with this little bit of CSS:

img { max-width: 100%; }

Which is a trick to ensure that images are resized downwards as their containers shrink.

The obstacle on a site like Botzilla is that most photo <IMG> tags have both WIDTH and HEIGHT properties specified, so that when displayed on a small screen, "max-width" alone doesn't get you very far -- the images don't scale uniformly down, but instead simply compress horizontally, untill they're long tall sticks.

JQuery to the Rescue!

Including this as the first line in my ready() function does the trick:


Comments on "Black"


All content on is 1994-2017 by Kevin Bjorke. All Rights Reserved.