Applying certain CSS to images over specified size.

Question

Here's my predicament; I'm working on a simple iPhone site (it's a port for my blog). I have this issue; In order for my blog to at least look somewhat nice, I need to put a boarder around every image over a certain size, and then center said images.

The site's content is literally an RSS feed displayed with some simple javascript and fancied up with some CSS. The CSS bit is what I'm trying to work on right now. Any help would be hugely appreciated (I'm rather new to javascript, so I realllly won't feel condescended if you elaborate slightly).

Answer 1

I'll break it down. The Javascript(done with jQuery) will iterate through every image on the page once it's loaded. If the height or width of the image is over 300, it appends the class 'oversized' to the parent. Change each instance of 300 in the script to what you consider oversized.

The CSS basically just consists of the text-align:center; to center the image in the <div> and then the border for the image.

Try the Fiddle

Javascript

$(document).ready(function() {
    $('img').each(function(e) {
        if (($(this).height() > 300) || ($(this).width() > 300)) {
            $(this).parent().addClass('oversized');
        }
    });
});​

CSS

.oversized { /* make the image align to center */
    text-align: center;
}
.oversized * { /* Anything in the oversized div will have a border (the image) */
    border: 1px solid black;
}

​