ブログ内の画像にborderをつけるとはみ出る問題を回避

やりたいこと

こんな感じでブログの画像に枠(border)をつけたい。

問題点

まずはBefore。

そして失敗After。

画像がはみ出た

親要素である、ブログ記事のエリア範囲を、borderを追加した分だけ超えてはみ出てしまう。

これは記事内の画像は、親要素に対しての幅が常に100%になっているためであり、そこにborderの太さは含まれていないから。

.entry-content img {
    max-width: 100%;
    border: 15px solid #fff;
}

つまり、borderの太さも画像の幅に含めればいいわけです。

解決コード

「box-sizing: border-box; 」を追加します。

.entry-content img {
    max-width: 100%;
    border: 15px solid #fff;
    box-sizing: border-box; 
}

完璧。枠も含めた画像サイズが記事エリアに収まりました。