Here is a neat little trick one can use to scale images in CSS to ratio. The trick works with the max-width and max-height CSS attributes.
Take the image to the right of here, with the dimensions 288 × 338. It has conveniently been thumbnailed by WordPress, but you can see that the thumbnail does not show the full picture. The thumbnail itself is set to 150 × 150 and to preserve any quirkiness with ratios, WordPress does not use scaling. Instead, WordPress generates a hard thumbnail of 150 × 150 which clips a part of the picture. With some proper CSS it is possible however, to use proper scaling. The advantage of this, is that the scaling can be generic and thus you can put any picture you want in it. It also requires no hard thumbnails to be made, so you dont have to worry about image editing, polluting your hosting space with thumbnails and managing said thumbnails. The disadvantage is, however, that the scaling uses the full image in all it’s bandwidth-absorbing glory. It also become messy when trying to fit images that are taken with a different orientation. (vertical versus horizontal) Continue reading »



