使いたいとき

cssで背景画像をつけるやり方だと簡単なんだけど、要素なくなっちゃうし、いまいちだよねーと思って、imgタグは残したかったので、なんとかならんかなーと試行錯誤してみた。

ただ指定するだけだと、1920px以下のモニターのときに、1920pxの画像は左が縮んでくれないから気持ち悪いことになる。
で、検索したけど、意外とTIPSが出てこなかったので（検索方法が悪いというのもあるか・・・！）、
とりま記事化しておこうかなと思ったわけ。

html

<h2><img src="hoge.png" alt="ほげほげ"></h2>

ポイントはたぶん、マイナスのマージンをつけるんだけど
calcでマイナスつけてやるのがミソ。

h2{
  min-width: 960px;
  margin: 0 calc((-1920px + 100%) / 2);
}

前にどこかのプロジェクトでこういうの書いた気がするけど、いまいち出てこなかったので、自分で書いちゃえと思ったのが発端。
そんで、他に探して出てこないかなーと思ったら意外と出てこなかったので、まとめておこうと思いました。

ある記事では、

margin: -100px;
padding: 100px;

ってやるとよい
って書いてあったけど、paddingつけちゃうと今回のようなときはダメだったなー。
脳がお疲れなので、なんでダメなのか原因までは探ってない（探る気にならなかった）。