Support » Themes and Templates » How to use CSS to shrink images?

  • WPChina


    Anyone know how to use CSS to shrink the size of an image? For example I ant it to be 50% smaller than its real size.


Viewing 8 replies - 1 through 8 (of 8 total)
  • <img src="..." alt="" style="width:100px;height:50px;" />

    Actually, I think that may just crop it off at that resolution now that I think of it…



    Right, that just crops it. I have tried using {img: 50%}, but that seems to increase the size of the image… anyone else know how to do this?

    50% means it’s 50% the width of it’s parent item:

    Anyway, I asked in #css on and while IE will use that width: x% to resize images, it shouldn’t do that and so FF/Opera/etc. don’t.

    I think the only way to do it is manually via the IMG tag or via Javascript.

    You could set a class for the image:

    <img src=”image.gif” class=”thumbnail” />

    image.thumbnail {

    It may throw up a validation error – depending upon your doctype – because you won’t have the width and height of the image within the img tag, but all images set with the “thumbnail” class will be 75px by 75px.



    Oh well…. yes, my research also found that it seems near-impossible. ;(

    doodlebee, I like your suggestion but I have hundreds of images and they are all different sizes, so I think maybe I will have to try javascript….

    Why are you trying to do this anyway? Just out of curiousity because perhaps there’s an alternate solution.



    Great question. I just switched an only PHPNuke website to WordPress. That PHPNuke website has hundreds of images that are now in the WordPress blog.

    The WP blog theme is quite different from my old PHPNuke theme (much much better, in fact), but one of the downsides is that I don’t have so much horizontal space where the posts are located in this theme. Therefore, I need to shrink all my images by about 50%.

    It would be very easy to find/replace heights and widths if all the images are the same size. But they are all different sizes. I thought about downloading all the images and batch processing them through an image optimization program on my computer, but when I upload them again, the HTML for each image will be wrong because the height and width will still have the old values. Therefore, though I will have smaller images, the incorrect/old height and width code will make it big again (and blurry).

    That is my dillemma… This is why i hoped CSS would help in this. Do you have any ideas on what could be done?

    That’s what a I figured. I think you have to use Javascript. This will make sure your images aren’t too wide:

    p img {
    max-width: 100%;

    But it won’t shrink it proportionally, but personally, I’d say screw it and that works well enough.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to use CSS to shrink images?’ is closed to new replies.