レスポンシブデザインでサイトを作成するとき、大きいサイズの画像を配置して、ブラウザが小さくなると画像の両端をはみ出させて、真ん中表示したいこと、、ありませんか？？

背景画像に指定して、background-position: center top; とかにしてもいいんですが、altにテキストも入れたくて、背景にはできないとき、、、

こちらのサイトにお世話になりました！

CSSで画像を中央揃えにして、両脇にはみ出した部分を切り捨てる。

書いてあるとおりなんですが、

• imgを囲っているdivの幅を、200%にする。
• divのmargin-right、margin-leftを-50%にする
• divにtext-align: centerを指定する

これで、ブラウザを縮めたときに両端が切れて、真ん中表示されるわけです。

普通に配置すると左にくっつく形で、右端から切れていきますからね、、。

表示させたい部分の幅が500pxだったら、メディアクエリで、ブラウザが500px以下になったら、幅500pxの画像を別途作成してそのままブラウザが小さくなったら縮むようにしたらよいかと。

こういうcssのコツが使えると、一気にコーディングの幅が広がりますね！

• CODING
• CSS