使いたいとき
cssで背景画像をつけるやり方だと簡単なんだけど、要素なくなっちゃうし、いまいちだよねーと思って、imgタグは残したかったので、なんとかならんかなーと試行錯誤してみた。
ただ指定するだけだと、1920px以下のモニターのときに、1920pxの画像は左が縮んでくれないから気持ち悪いことになる。
で、検索したけど、意外とTIPSが出てこなかったので（検索方法が悪いというのもあるか・・・！）、
とりま記事化しておこうかなと思ったわけ。
html
<h2><img src="hoge.png" alt="ほげほげ"></h2>
css
ポイントはたぶん、マイナスのマージンをつけるんだけど
calcでマイナスつけてやるのがミソ。
h2{
min-width: 960px;
margin: 0 calc((-1920px + 100%) / 2);
}
まとめ
前にどこかのプロジェクトでこういうの書いた気がするけど、いまいち出てこなかったので、自分で書いちゃえと思ったのが発端。
そんで、他に探して出てこないかなーと思ったら意外と出てこなかったので、まとめておこうと思いました。
ある記事では、
margin: -100px;
padding: 100px;
ってやるとよい
って書いてあったけど、paddingつけちゃうと今回のようなときはダメだったなー。
脳がお疲れなので、なんでダメなのか原因までは探ってない（探る気にならなかった）。