Wide images can actually break your layouts if not handled properly. Suppose that you don't want to use the Blogger upload function. Instead, you want to insert an image this way:
<img src="http://www.somesite.com/img/wide-image.png" />
You open your post page and you notice that your layout is broken. Sure, you can specify the dimensions of each image through HTML attributes, but to do this you have to know in advance the exact dimensions of each image. CSS provides a simple workaround to this problem:
img.wide {
display: block;
width: 100%;
}
By doing so, the width of each image will always fit the width of its container. This technique works because we've turned our images into block-level elements and then we've applied percentages to them. You don't have to worry about the exact dimensions of each image anymore. Really useful!