![「[CSS2行]画像,地図などの”はみ出させたい要素”を親要素関係なくウィンドウ幅に」のアイキャッチ画像](/images/tmb/css-innerOver.jpg)

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

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

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

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

“`css
width: 100vw;
margin: 0 calc(50% – 50vw);
“`

### Demo

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

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

“`css
width: 100vw;
margin: 0 calc(50% – 50vw);
padding: 0 calc(50vw – 50%);
“`

### Demo