[HTML,CSS]画像リンクの設定で、aタグの有効範囲を変更する方法

Question

お世話になっております。
表題の通りですが、画像リンクでaタグのみ有効範囲を変更する方法を模索しています。

■やりたい事

[HTML]
<div class="site-link">
 <a href="https://xxxxx.co.jp">
  <img src="https://images/title.png">
 </a>
</div>

以上のようなHTMLを実装すると、通常aタグのリンク有効範囲は画像全域になりますが、下記画像のような状態にしたいです。

■試した事
・CSSでaタグ範囲の変更

[CSS]
.site-link a {
　width: 500px;
  height: 170px;
}

この方法では、imgタグにもaタグと同じ幅が適用されてしまいNGでした。

・imgタグとaタグを切り離しそれぞれ範囲を指定

[HTML]
<div class="site-link">
 <img src="https://images/title.png">
 <a href="https://xxxxx.co.jp"></a>
</div>

[CSS]
/*要素を並列に*/
.site-link {
  display: flex;
}
/*aタグ範囲設定*/
.site-link a {
  position: absolute; /*aタグの起点をimgタグと同じに指定*/
  width: 500px;
  height: 170px;
}

この方法で一見実装できたように思ったのですが、ブラウザの幅を小さくするとimgタグは合わせて縮小されるのに対し、aタグは決められた幅で範囲が残るので、下記画像のようになってしまいこちらもNGでした。

現在も試行錯誤しておりますが、解決に至らずこちらにご質問させていただきました。
宜しくお願い致します。

Answer 1

何をしたいのか、よく分かりませんが、下記のようなことでしょうか。

画像は画面幅に応じて拡大縮小
リンク有効範囲は画像の左半分

<div class="site-link">
 <img src="https://images/title.png">
 <a href="https://xxxxx.co.jp"></a>
</div>

.site-link {
  position: relative;
  max-width: 1000px;
}

.site-link a {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.site-link img {
  width: 100%;
}

CodePenサンプル

Comments

[joyboy]

回答ありがとうございます。
拙い質問文で申し訳ありません。
質問内容は憶測されている通りです。
回答いただいたソースを元にコーディングしたところ、無事に実装完了しました！
記述しているCSSの内容も理解が進み、勉強になりました。
少し話が逸れてしまいますが、CodePenてソースのやり取りにすごい便利ですね。
今後私も活用して移行と思います。
アドバイスありがとうございます！

Answer 2

イメージマップ(クリッカブルマップ)を使えばいいのでは。

Comments

[joyboy]

回答ありがとうございます。
このようなリンクの指定の仕方があるのを初めて知りました。
範囲の指定も自由にできるので、画像リンクの汎用性が高いと思います。
今回は別のやり方で実装しましたが、新しい技術を教えていただきありがとうございます！

Answer 3

.site-link {/* このクラスがどのようにブラウザ幅と連動しているかわからない */
  display: flex;/* ブラウザ幅との連動条件によってはposition:relative;のが好ましいかも */
  /* max-width: 1000px; 親要素に大きさ指定が無いと子要素の％が効かない */
}

/*position:relative;にした場合はimgタグにもCSS必要
.site-link img {
  position: absolute;
  max-width: 100%;
}
*/

.site-link a {
  position: absolute;
  width: 50%;
  padding-top: 17%;
}

ブラウザ幅との連動しているCSSの記述があるとアドバイスがしやすいのです

1000px × 170px の親要素に対して 500px × 170pxのaタグ有効範囲を持たせ
ブラウザ幅縮小時に対してアスペクト比を保ちつつ有効範囲を縮小したいと推測します

上記のCSSではaタグの横幅は親要素50%の幅を保ちます
そしてpadding-topで高さを指定します

padding-top: 17%; と指定しましたので
親要素が横幅1000pxの場合aタグの高さは170pxとなります
親要素が横幅500pxの場合aタグの高さは85pxとなります

Comments

[joyboy]

回答ありがとうございます。
>ブラウザ幅との連動しているCSSの記述があるとアドバイスがしやすいのです
連動しているCSSの記述を忘れてしまいすみません。
質問内容は憶測されている通りです。

>上記のCSSではaタグの横幅は親要素50%の幅を保ちます
正にやりたい事はこれでした。
無事に実装も完了し、また一つ理解が深まりました。
解説までしていただいてありがとうございます！