レスポンシブデザインでサイトを作成するとき、大きいサイズの画像を配置して、ブラウザが小さくなると画像の両端をはみ出させて、真ん中表示したいこと、、ありませんか??
背景画像に指定して、background-position: center top; とかにしてもいいんですが、altにテキストも入れたくて、背景にはできないとき、、、
こちらのサイトにお世話になりました!
書いてあるとおりなんですが、
- imgを囲っているdivの幅を、200%にする。
- divのmargin-right、margin-leftを-50%にする
- divにtext-align: centerを指定する
これで、ブラウザを縮めたときに両端が切れて、真ん中表示されるわけです。
普通に配置すると左にくっつく形で、右端から切れていきますからね、、。
表示させたい部分の幅が500pxだったら、メディアクエリで、ブラウザが500px以下になったら、幅500pxの画像を別途作成してそのままブラウザが小さくなったら縮むようにしたらよいかと。
こういうcssのコツが使えると、一気にコーディングの幅が広がりますね!
Related Posts
- WordPressでタームごとに投稿一覧を表示して各一覧に「もっと見る」ボタンをつける Posted in WordPress, PHP, jQuery, CODING
- WordPressで記事ランキングを設置するならWP-PostViewsが最適なのでは? Posted in WordPress, プラグイン, PHP, WordPress Popular Post, CODING, WP-PostViews
- A plugin that allows you to easily create custom blocks with WordPress block editor [Block Lab] Posted in 未分類
- WordPressのタグ一覧を記事数順に表示する Posted in WordPress, PHP, CODING
- wp_upload_dirっていうくせもの Posted in WEB DESIGN, WordPress
- WordPress5.0リリース Gutenbergとプラグインの相性について Posted in WordPress, プラグイン, Custom Post Type UI, Custom Field Template, カスタムフィールド, Advanced Custom Fields, Gutenberg