In word press, should you upload a picture, and allow it to display in 100%: whether it surpasses its containers width, the theme will either:

a) be damaged, playing in the layout from the page

or

b) hide the additional width it cant display

To a non-fluid layout, obviously.

The answer 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 may, apparently is simply ensuring the look is displayed under 100% from the width from the objected where it's nested in

And also the overflow: hidden would be to result in the extra bit disappear?

Well, this isn't things i am searching for.

I'm searching for a means (in css, ideally) to get this done:

If image is simply too large, allow it to be 100% of accessible width

If image isn't too large, allow it to be its original size.

I have been setting <img width="100%" to resolve this issue, but this can mention problems inside a fluid layout, like the chance of enlarged images.

edit: Well, apparently, the max-width style should work with the intended purpose. However in the Mystique theme user css of wordpress it isn't working, and that i cant' understand why. Most likely a conflict between measures taken through the theme itself regardig max-width. y.estamine.internet/primary/wordpress-content/styles/mystique/style.css <- somewhere here, i believe.

The utmost content width ought to be occur functions.php. The example below comes from Twentyten. This can stop 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;

Setting the max-width to some maximum value works best for me. For instance

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

Fiddle http://jsfiddle.net/t29yV/

Setting it to some percentage works too... to have another thing happening.

Examined in IE7/Chrome/Opera