object-fit: contain;のときに画像だけにaタグを効かせる方法

Question

お世話になります。

高さ・横幅・縦横比の違う画像を複数貼っていおり、画像にaタグをつけています。
現在aタグが、画像だけでなく、imgで指定している範囲全てに効いてしまいます。

<div class="boxin_img">
  <a href="https://www.google.com/" target="_blank" tabindex="-1"><img src="https://1.bp.blogspot.com/-MatZaoyqiGA/XnLn6MAUAnI/AAAAAAABX0g/1UrkPi3q0XouCxHOgIvvXbUP-EQS2DsXgCNcBGAsYHQ/s400/chirashi_mansion.png"></a></div>

.boxin_img {
    position: absolute;
    /* width: 62%; */
    height: 47.58vw;
}

.boxin_img img {
    max-width: 1012px;
    max-height: 770px;
    width: auto;
    width: 62vw;
    height: 47.58vw;
    float: left;
    position: relative;
    object-fit: contain;
}

Codepen

object-fit: contain;のときに画像だけにaタグを効かせる方法を教えていただきたいです。

Answer 1

object-fit を使わなくてもいいならこういう方法はどうでしょうか。
サンプル

.boxin_img {
  position: absolute;
  width: 62vw;
  height: 47.58vw;
}

.boxin_img img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

Answer 2

画像のサイズが 400px×400px
で、
img要素に width:62vw;height:47.58vw;
と設定すれば、画像と縦横比が異なりますので、当然左右に空白でできますね。
リンクはimg要素に効きますので左右の余白も反応します。

やりたいことが、width:62vw;height:47.58vw; の枠内に画像を縦横比を崩さずに配置したいということなら、imgにサイズを設定するのではなく、その親のブロックにサイズを設定すればいいでしょう。

.boxin_img {
  position: absolute;
  width: 62vw; 
  height: 47.58vw;
  display: flex;
  justify-content: center; /* 子要素を中央寄せ */
  border: 1px solid; /* レイアウトが分かり安くするために */
}

.boxin_img img {
    width: auto;
    height: 100%;    
}

これで画像上だけにリンクが効きます。

Comments

[meli]

ご回答ありがとうございます！
こちらの方法を試させていただいたのですが、
サイト上には縦横比の違う画像があり、こちらだと縦長の画像は綺麗に表示されるのですが、横長の画像がはみ出してしまいました。
imgのwidthとheightのauto,100%を逆にすると、上記の問題が逆になります。
良い手はないでしょうか…