レスポンシブデザインを作成しているとどうしてもmax-widthを多用する場面が増えてきます。

しかし、デザイン的に画像やマップだけ親要素のmax-widthを無視してウィンドウ幅に表示させたい場面が多くあったのでメモ。

親要素のmax-widthを無視して画像だけ100vw

はみ出させたい要素に以下を追加する。親要素に手を加える必要はありません。

width: 100vw;
margin: 0 calc(50% - 50vw);

Demo

タイトルなどの背景だけはみ出させたい時

はみ出させたい要素に以下を追加。同じく親要素に手を加える必要はありません。

width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);

Demo