Before you start inserting images into your blog posts, you need to know how wide your image can be without extending past the edges of your content area. The easiest way to do this is to install and use the Web Developer addon to the Firefox browser. Find the Information menu in the Web Developer toolbar, and choose the Display Block Size menu item. The dimensions will be displayed on the screen. Look for the box that most closely outlines the text of the blog post, as illustrated below:
Change Your Media Settings
Now that you know how wide your content area is, you want to make sure that your images can’t exceed that width. If your theme creates borders or frames for images, you need to take that into consideration as well, subtracting the width of the border from the total width available. When you think you know the maximum width your images can be, go to the Media subpanel of your WordPress Settings. Change the width of the large size to content-width minus border-width, as illustrated below, and save your changes.