Large size image breaks template layout

Question

If I upload a large size image inn my wordpress, the image breaks my template width. I have seen some templates which scale the large image's width to the maximum width of the post div. What CSS or code I need to change for that purpose? Thanks.

Answer 1

In your functions.php file, you need to define $content_width, which will cause WordPress to scale large-size images, and also embedded videos, accordingly.

e.g. if the width of your content area is 600px:

if ( ! isset( $content_width ) ) {
    $content_width = 600;
}

You will probably also want to add accompanying CSS, e.g.:

#content img {
    width: auto;
    max-width: 600px;
    height: auto;
}

That way, when the image is scaled, it will maintain its proportion; rather than merely having its width reduced, the height will also be scaled proportionately.

Answer 2

You don't need any CSS, just go to Settings > Media and adjust the Large image size width to that of your post container. You may need to Regenerate Thumbnails after doing that.