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

Mar 13, 2012   //   by phpfreelancer.biz   //   Blog, Wordpress Theme Tutorial  //  No Comments

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
To fix this problem:
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;
}

the another way is
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;

Leave a comment

Share This Post

RSS Wordpress News