画像の上に分割した複数の別画像を重ね、 各々ボタン（リンク）にしたいです。

Question

実現したいこと

本体の画像の上に
分割したA～Dの画像を重ね、
A～Dの画像を各々ボタン（リンク）にしたいです。

発生している問題・分からないこと

エラー：本体画像の中央にボタンを配置したいため下記のcssコードを記載いたしましたが
A～Dが縮小されてしまいます

エラーメッセージ

エラー：本体画像の中央にボタンを配置したいため下記のcssコードを記載いたしましたが
A～Dが縮小されてしまいます。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2026-04-16/d6c0c00c-af88-4b90-968d-a1a67f992bd5.jpeg)

該当のソースコード

<div class="kasaneru">
<img src="./image/back.png"  alt=女の子"/>

<div class="kasaneru_01">
	<div class="menu">
  <button class="ice"><img src="./image/btn_a.png" alt=""></button>
  <button class="ice"><img src="./image/btn_b.png" alt=""></button>
  <button class="ice"><img src="./image/btn_c.png" alt=""></button>
  <button class="ice"><img src="./image/btn_d.png" alt=""></button>
</div>
	</div>
		
</div>

.kasaneru{
  position: relative;/*親要素にrelative*/
}
.kasaneru_01{
  position: absolute;/*重ねたい子要素にabsolute*/
top:50%;
left:50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;
}




.menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;	
}

.ice {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.ice img {
  width: 100%;
  transition: transform 0.2s;
}

.ice:hover img {
  transform: scale(1.05);
}

.ice:active img {
  transform: scale(0.95);
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

「.kasaneru_01」の
top:50%;とleft:50%;を両方入れると、画像のA～Dが小さくなってしまいます。
どちらか一方ですと縮小されずに配置可能でした。
ですが、中央配置したく、
どの部分を修正すれば実現できるか、お手間ですがご教示をお願い致します。

補足

特になし

Answer 1

Windows 11のEdge,Chrome,Firefoxで確認しました。
こちらでは、Lhankor_Mhyさんの回答では逆にボタンが拡大されたので、別の方法を回答します。

CSSの.ice imgで、width: 100%;は不要です。
これがあるとセルのサイズに対する100%になるので、ボタンの画像のサイズによっては縮小されます。
削除するか、width: auto;にします。

ついでに、今回の件と関係無いですが、以下の2行は今どきのブラウザーでは不要です。

 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/

Answer 2

以下を追加するとどうでしょうか。

.kasaneru_01 {
    width: 100%;
}

蛇足ですが、中央配置をするために絶対配置をするのはあまりお勧めできないです。
https://qiita.com/lhankor_mhy/items/bdcede71b1aad3b7ee94#absolute-%E3%81%AF%E4%BD%BF%E3%81%86%E3%81%AA

Comments

[kimu05]

いつもありがとうございます。
中央寄せの件もお気遣いありがとうございます。
サイト拝見させていただき、再度組んでみたところ、
無事に実装できました。
お忙しい中恐れ入ります。
ベストアンサーに選ばせていただきます。