レスポンシブの際に画像横幅100%をした場合

レスポンシブの場合、画像幅100%を書いておくことが多いです。

width: auto;
max-width : 100%;
height: auto;

こう書くことでコンテンツからはみ出すのを防ぎます。

ただこれだとボーダーがついた場合、100% + ボーダー になりますので結局はみ出します。

その際、box-sizing:border-boxを書くことでそれを防ぐことができます。

↓実際の例

    img {
    	width : auto;
        max-width : 100%;
        height : auto;
        border : 10px solid #F00;
        box-sizing: border-box;
    }
    

100%指定でもちゃんとコンテンツに収まるようになりました。

リンクするしないでボーダーの有無を変える

リンクが貼られた画像のみボーダーを付けると通常であればリンクのある画像だけサイズがボーダー分大きくなります。
box-sizing : border-boxを書くことで表示サイズを同じに出来きます。

    img {
    	width : auto;
        max-width : 100%;
        height : auto;
        box-sizing : border-box;
    }
    a img {
    	border : 10px solid #F00;
    }
    

マウスオーバー(hover)時のみボーダーを付ける

これはPC向けですが、box-sizing:border-boxを使えばマウスオーバー時のみボーダーを付けるという動作でも表示幅は変わらないためレイアウト崩れを防ぐことができます。
可変のため画像の幅は変わってしまいますが、よくある1pxのボーダーとかだとほぼわからないと思います。

    img {
    	width : auto;
        max-width : 100%;
        height : auto;
        box-sizing : border-box;
    }
    a:hover img {
    	border : 10px solid #F00;
    }
    

ホバー時に高さがすこし変わるよう。きっちり詰めるレイアウトとかはやめといたほうがいいかも。

きっちりレイアウトする場合は高さを固定にすれば対応できます。
ですのでPCで下記のようなレイアウトをするときに使えますね。

    img {
    	width : 150px;
        height : 100px;
        box-sizing : border-box;
    }
    a:hover img {
    	border : 2px solid #F00;
    }
    

要するに

ブログコンテンツ内の画像には　box-sizing : border-box を書いておくと良い！
とうことですかね。

特にレスポンシブの場合。