How to Make Blog Photos Respond to Column Width

It's always been a pet peeve of mine when my blog photos spill over into my sidebars.

You know when you size a photo perfectly to fit the width of your blog space, but later you do some redesigning and suddenly your beautifully large photos are sticking way out to one side and covering the info in your sidebar? Make. It. Stop.

Luckily, I happen to work with a bunch of coders.

So when I recently expressed my angst about this issue, it wasn't a big surprise when one of them emailed me a simple code later that solved all my problems. (Thanks, Kyle!)

Here it is broken down into a few (seriously) simple steps. Now you can redesign your blog and adjust column widths as you please with no consequences! Plus, it takes less than a minute total to make this happen. Score.

Note: Don't worry about it resizing smaller photos to be larger or anything crazy. The only thing it does is make photos that are too big just small enough to fit inside the column :)

1. Click on Template in the back end of your blog.

2. Click on Customize.

3.  Click on Advanced.

4. Scroll down and click on Add CSS.

5.  Copy the code below and paste it into the box.

Here's the code: .post.hentry img {width: auto;height: auto;max-width: 100%;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}

6. Click Apply to Blog. Then post a ridiculously large photo of Chuck Norris and don't worry about it spilling over into the sidebars because that's how this magic works.

[via]

Let me know if you have any questions! Happy blogging!

And feel free to repin this blog using my original pin so you can share this knowledge with your people!