Have you ever had an image show up on your website which is to large, causing problems for your WordPress theme?   This is especially common for WordPress blogs that have multiple authors, where some authors or guest posters may not know how big they can make the images.

Fixing this is incredibly easy with this CSS hack!    All you need to do is take the following code and place it in your stylesheet, setting a maximum width for your images:

.postarea img {
max-width: 500px;
height: auto;
}

In the above code snippet, you’ll want to replace postarea with whatever div ID or CLASS your theme uses for the content.   You can also adjust the 500px to the maximum width you’d like for your images to be.

Note: This hack may not work on some versions of Internet Explorer.

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Connect with Kyle on Twitter or Google+!

  1. Suzanne says:

    For people that still have to support browsers that don’t understand max-width, there’s a really slick plug-in called Scissors you can get for WordPress. This plug-in inserts a tiny bit of code into the image upload/management screen which allows you to resize and crop any image you upload BEFORE inserting it into your post. It’s very slick and it does a nice job compressing the file too.

  2. How about if i’m hosting images on imageshack, how can I control image width in a multi-browser way?

  3. Stefan Vervoort says:

    Suzanne, I was just about to say that, it doesn’t work for a certain browser (arrg IE). Anyway, thanks for the quick fix and the plugin recommendation! :)

  4. I’m not surprised IE doesn’t support this — they never support any of the cool CSS. (All the more reason to use Opera. :D)

    This is a very handy tip, though, I wish I’d known about it sooner. The Scissors plugin sounds like it’s worth looking into too. Thanks for sharing!

  5. John Peniel says:

    Holy cow… I was looking for this but gave up. Then went off to search for some other hacks and ran into this one. Thanks!

Trackbacks/Pingbacks »

  1. Round WordPress: Summer of Code, Kubrick Retired, How Tos, WebWare 100, and WordPress Fan Blogs | linkfeedr says:
  2. Membatasi Ukuran Gambar Blog | Tarqy dot Com says:
  3. Image too big? « Best Wordpress News™ says:
  4. WordPress Time-saving Tips | Matthew Michaels – Graphic Design says: