CSS : maximum image width for a wordpress theme (or any theme, really)

Question

In word press, if you upload an image, and let it display in 100%: if it exceeds its containers width, the theme will either:

a) be broken, messing up the layout of the page

or

b) hide the extra width it cant display

This is for a non-fluid layout, of course.

The solution presented here:

http://lorelle.wordpress.com/2006/10/07/the-battle-between-image-width-and-column-width/

p img {
    padding: 0;
    max-width: 100%;
}
#header, #content, #footer, .widget {
    overflow: hidden;
}

what this does, apparently is just making sure the image is displayed under 100% of the width of the objected where it's nested in

And the overflow: hidden is to make the extra bit disappear?

Well, this is not what i am looking for.

I am looking for a way (in css, preferably) to do this:

If image is too big, make it 100% of available width;

If image is not too big, make it its original size.

I've been setting <img width="100%" to solve this problem, but this will bring up problems in a fluid layout, such as the possibility of enlarged images.

edit: Well, apparently, the max-width style should work for the intended purpose. But in the Mystique theme user css of wordpress it's not working, and i cant' figure out why. Probably a conflict between measures taken by the theme itself regardig max-width. y.estamine.net/main/wp-content/themes/mystique/style.css <- somewhere here, i think.

Answer 1

Setting the max-width to a maximum value works for me. For example

div {
    width: 500px;
    height: 500px;
    border: 2px solid black;
}
img {
    max-width: 500px;
    max-height: 500px;
}

Fiddle http://jsfiddle.net/t29yV/

Setting it to a percentage works too... so you may have something else happening.

Tested in IE7/Chrome/Firefox

Answer 2

The maximum content width should be set in functions.php. The example below is from Twentyten. This will prevent your large sized images from overflowing.

 * Set the content width based on the theme's design and stylesheet.
 *
 * Used to set the width of images and content. Should be equal to the width the theme
 * is designed for, generally via the style.css stylesheet.
 */
if ( ! isset( $content_width ) )
    $content_width = 640;