How big a .jpg can I put there?

June 19, 2012 3:01 PM

HTML: Is there a quick way to determine the width of a fixed-width column?

I want to help someone put the biggest, widest possible version of an image into her blog post.

When I inspect the element that contains the blog post using Firebug, it looks like it inherits styles from eight different divs in several different stylesheets. Is there a methodology, a browser plugin, a magical incantation, or some other alternative to reading through all that CSS to figure out the widest possible thing I can put in that column?

posted by FLAG (BASTARD WATER.) (Acorus Adulterinus.) to Computers & Internet (7 answers total)

Best answer: Is this something you want to do on the fly in Javascript? Or do you just want to figure it out once (i.e., you have a fixed-width layout)? If it's just once, inspect the element in Firebug and pick the Layout tab on the right. You'll get a nice diagram with the width and height of the element (taking any padding into account).

If it's on the fly, with something like jQuery, it's trivial. Say, to get the width of an element with the ID "content-div": var width = $('#content-div').width(); If you don't have jQuery available, there are a few more hoops to jump through but it's not tough.
posted by zsazsa at 3:09 PM on June 19, 2012

is there an article that has more then a few lines in it? enough to give you a sense of how wide it is?

If so, then you can grab a screen shot and import it into your graphic editing program of choice (photoshop or gimp) and crop it down. Select the very first stroke of the first letter of the lines, and drag the selection all the way to the last stroke of the last letter of the longest line. (see example)

then go to resize the image and it should tell you how wide the current image is. That's probably the best guess you're going to get.

From this method I can see that the preview box for AskMefi posts is 590px.
posted by royalsong at 3:17 PM on June 19, 2012

In firebug (or chrom's inspect element), the only valid width will the the one not crossed out. So basically do down the list and stop at the first width. Repeat for padding.
posted by magullo at 3:18 PM on June 19, 2012

The documentation for a theme often indicates the "content width". You might check that first. Especially helpful if the stylesheet will add border/padding to an image, that a "reverse engineering" method would not account for.
posted by misterbrandt at 3:24 PM on June 19, 2012

The quality will suffer a little due to browser scaling, but you could upload an image larger than necessary and insert it like the following:

<img src="path/to/image.jpg" width="100%" />
posted by axismundi at 3:52 PM on June 19, 2012

You know this may not be limited by any set width right? It could be percentage based or it could just grow based on the width of the content.

Here's what I'd do, I'd insert an image of any size then I'd use firebug or the chrome and "Inspect the Element" in the inspector tools, which allows you to edit the HTML and CSS on the fly. Now if there's not a width setting for it in CSS I'd create one. Then highlight the size and press your up arrow which should increment the width.

Keep going until the page "breaks".
posted by bitdamaged at 4:12 PM on June 19, 2012

Response by poster: Thanks, zsazsa -- the Layout tab in Firebug contains exactly the information I was looking for. I just didn't know it existed!
posted by FLAG (BASTARD WATER.) (Acorus Adulterinus.) at 4:17 PM on June 19, 2012