Override CSS height:auto and width:auto and use HTML attribute instead?

Question

The WordPress parent theme I am using (Genesis 2) has image height and width defined in CSS like this:

img {
    height: auto;
    width: auto; /* IE8 */
}

which, as expected, forces the image to the size of the parent container. The HTML markup looks like this:

<img width="205" height="205" src="/wp-content/uploads/2012/11/Mr.-MaGoo-205x205.jpg" class="attachment-thumbnail" alt="Mr.-MaGoo">

My problem is that I want the image sized to the attributes in the HTML (205x205) and not the size of the parent container. The parent container happens to be a little larger than the image.

How do I override the CSS to allow the HTML to take over?

Answer 1

You cannot.

If there is a CSS rule, then the rule will override any presentational hints in the markup.

The CSS specification explicitly puts presentational markup as having specificity 0 (where they will be overridden by any other rule).

(If you can change the markup, you can use inline CSS (which has maximum specificity) instead of specific presentational attributes)