六芒星上に画像を配置

Question

【実装したいこと】
画像にございますように、大きな画像の周りに、六つの小さな画像を並べたいと考えています。さらに、画像にございますように、ＰＣサイズからスマホサイズへ大きさを変える際に、配置をそのままにした状態で縮小していければなと考えています。
大きな画像と小さな画像だけでば、全部まとめて一つの画像ファイルにしてしまい、挿入するのが簡単だと思います。
しかし、小さい画像の中には、ボタン画像や文章等がございまして、そこから各々リンク先に飛べるようにしたいと考えているため、中身のボタン画像や文字もともに小さくなってくれれば良いと考えます。
※スマホサイズになれば、見にくくなることは承知の上でございます。

【試したこと】
まず、大きな画像の上に、小さな画像を6つ並べるとして、
➀大きな画像をrelative、小さい画像をpositiveにした。
←画面サイズを変えると、とことんずれる
➁多いな画像を含む背景画像を作って、background-imageに指定し、6つの画像はbootstrapのグリッドで指定。それぞれの感覚はpaddingで指定。
←六つの画像が画面サイズに合わせて小さくすることができれば（ここのコードもわかりません）、➀よりはましになりそうです。

いずれにしても、あまり良いアイデアでないため、お力添えをよろしくお願い申し上げます。

Comments

[m.ts10806]

「試したこと」では現在のコードを提示されることを強くすすめます。「想定通りできなかったからあとはお願い」では丸投げです。どこまでできていて何ができていないのかは文章だけでは不確かです。

[goldg]

申し訳ございません。消してしまいました。次回から追加するようにいたします。

[m.ts10806]

質問は編集できるので適宜対応してもらえたらと。

[sansansandodo]

確認なのですが、画像をあらかじめ結合させて使うのでは問題があるのでしょうか？

[goldg]

<mtsさん>コード自体を消してしまいましたので、復元させて修正いたします。<sansansandodoさん>画像自体をアイコンにして、リンクボタンを上にのせたり、アイコンが切り替わるようにしたいので、あらかじめ結合しない方が良いです。

[yoshinavi]

＞【試したこと】 ➀大きな画像をrelative、小さい画像をpositiveにした。　→　CSSの「positionプロパティ」のことでしょうか？

Answer 1

まず位置合わせについて。

大きい画像を囲むdivをposition:relativeにし、
小さい画像（リンク有りなら画像を囲むaタグ）をposition:absolute

小さい画像の位置は六芒星の頂点になるように、leftとtopを％で指定します。
さらに、中心を合わせるためにtransformで50％ずつ左上に戻します。

次に小さい画像のサイズについて。
画像のサイズはwidth:100%、height:autoにしておき
それを囲むaタグのwidthを親要素（大きい画像を囲むdiv）に対しての％で指定してください。

サイズも位置も、親要素に対して％指定するのが肝です。