#container { min-width: 47.5em; max-width:60em; margin: 0 auto;} #wrapper { float: left; width: 100%;margin-right: -29%; background-color:#333333;}
#content { margin-right: 29%; background-color: #ddd;}
.post {
width: 95%;
margin: 20px auto;
background-color: #fff;
}

画像はCSSでemを使って指定する。使いたいサイズのままトリミングすると拡大したときのに画像が荒くなる。本来挿入するサイズよりふた周り程大きめにトリミングして、emで表示させたいサイズを指定すると拡大しても荒くならない。
サンプル画像

.post img { width: 22em; height: 13.6em;}
.post {
width: 95%;
margin: 20px auto;
background-color: #fff;
}
.post {
width: 95%;
margin: 20px auto;
background-color: #fff;
}