Skip navigation

Scaling Images with CSS - One Image Does It All

Big Baer’s CSS Tutorials includes CSS Scale Image techniques that are worth studying to learn more about scaling your images with CSS only. This gives a lot of leeway in structuring, sizing, and laying out your website or WordPress Theme.

The benefits are that you can have one image in your server storage files that you can use in multiple ways in multiple sizes. For example, if you want to include an image in your WordPress explicit excerpt, you can style it with a smaller height and width using only a class reference such as class="excerptsm" and then use a different sized style in your full post as class="fullsize". If you have a gallery page, you can use the same image at a different size to fit within your gallery displays.

If storage space is tiny, and you tend to use image that are consistently the same sizes, then this is a great way to get the most bang for your buck when using CSS styles to control the size of your images.


Site Search Tags: , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen

2 Trackbacks/Pingbacks

  1. [...] Scaling Images with CSS - One Image Does It All [...]

  2. [...] Scaling Images with CSS - One Image Does It All [...]

Post a Comment

Your email is never published nor shared.