.container画像が大きすぎる場合はサイズが変更されるように、画面上のまったく同じ位置、中央、およびブートストラップに4つの画像を配置したいと思います。
目標は、完全なロゴを白黒で含む Web サイトの最初のページを作成することです。
マップ/エリアを使用して、マウス入力イベントでロゴの背後に画像を表示し、特定の領域のロゴの下にある種の影 (特定の形状を持っているため、css では実行できません) を作成できます。
私の4つの画像は次のとおりです。
- フルロゴ
- 左上の影
- 右上の影
- 下の影
それらはすべてまったく同じサイズです。.pagination-centeredそれらをすべて組み合わせて使用するだけで十分だと思ったのですが、うまくいきません。
すべての画像に対して次のCSSを試しました（すべて別のdivに埋め込まれています）
position:absolute;
left:50%;
top:50%;
margin-left:-157px;
margin-right:-157px;
/* half of img real size */
うまく機能しますが、画像のサイズが正しく変更されず、下部のバーが画面の中央に表示されるモバイルでは機能しません。これは、配置時に画像の高さが考慮されていないと思われるためです。