So I was chat­ting yes­ter­day with a friend (DeZign Diva, check her site out!) about one of her lat­est inspi­ra­tion posts, and in glanc­ing at it, I saw that she was adjust­ing the size of her images in the post code and this was caus­ing con­fu­sion and clut­ter and squish­ing her images at times. “There’s got to be a bet­ter way,” I said to myself. And Lo! A few moments later I real­ized that it is quite easy to con­trol image size and loca­tion with­out hav­ing to add items to the html code in your posting.

Using my blog for an exam­ple, my post sec­tion is 780px wide has a 20px right mar­gin, then the side­bar is 160px wide (based off the 960 grid model best described here. I got rid of the exte­rior mar­gins though, so I could add another 20px to my post sec­tion). Now you want to be able to con­trol the size of your images but keep the aspect ratio…in HTML that means adding a width and height adjust­ment to each one by doing the math (the way Mia was doing it). More sim­ply, you can replace what­ever the height is with height=“auto” and this will con­strain the height to the width in the proper pro­por­tions. But you still have to add that to every img tag. If you have access to your style sheets this can be con­trolled glob­ally across all your posts(past and future!) with 1 line of code. Boom! (do you pre­fer Whammy!?) you have uni­form image widths through­out all your posts with­out affect­ing any other image on your site.

Exam­ple from my blog:div.entry img{
max-width:580px;
height: auto;
}

Orig­i­nal:

CSS Con­trolled:

This works because of the speci­ficity call to the img selec­tor, and the CSS inter­prets the orig­i­nal aspect ratio, and retains in rela­tion to the new max-width through the “auto” value. Speci­ficity is a rule within CSS that very basi­cally decides which is more impor­tant by the par­ent selec­tors added to a line of code. div.entry img{} over­writes img{} for any images within the div that has the class=“entry” attached to it. Any other img{} code on the site is kept the same. You don’t need to add div to the front, but doing so gives your cus­tom code a higher speci­ficity than .entry img{} should that be else­where in the style sheet. (read up on speci­ficity at Smash­ing Mag here.)

You can con­trol any aspect of the img selec­tor through this method, set paddings, mar­gins, cen­ter­ing, etc. Thanks for read­ing my quick tip, If you have any ques­tions, com­ment here. And here’s some zen::

Note: I really don’t agree with this one because I’m from NY and any 9/11 images piss me off but, this is really effective.

Chris Trude

Chris is a twitter-head, blog­ger, and web/graphic designer by night, and an in-house graphic designer by day. Also hap­pens to be an avid prac­ti­tioner of awe­some­ness. Feel free to sub­scribe to my feed, or fol­low me on Twit­ter to keep in touch with my day to day.