画像のリンクは、幅の幅を受け取ります

Question

これはthis question,と非常によく似ていますが、その答えは私のためには機能しません。

私は画像がある行があり、画像をクリックできるようにしたい。ここに私のコードです：

<div class="row"> 
     <div class="col-lg-4"> 
      <h2 align="center"><a href="#">Education and Outreach</a></h2> 
      <a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/outreach_small.JPG" style="width:225px;height:228px;" alt="Several remote-sensing-related words on a black background."></a> 
      <br></br> 
     </div> 
     <div class="col-lg-4"> 
      <h2 align="center"><a href="#">Imagery</a></h2> 
      <a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/earth.png" style="width:225px;height:228px;" alt="A satellite image of the Earth."></a> 
      <br></br> 
     </div> 
     <div class="col-lg-4"> 
      <h2 align="center"><a href="#">Remote Sensing Resources</a></h2> 
      <a href="#" style="width:225px;"><img class="img-responsive center-block" src="../img/dataresources.jpg" style="width:225px;height:228px;" alt="stylized stream of zeroes and ones emanating from a central globe."></a> 
      <br></br> 
     </div> 
    </div> 

私はそれが私のように見えるようにしたいです。赤色の線は、リンク境界がどこにあるべきか、すなわち画像上のみであるべきである（画像がクリック可能になるように）。

しかし、その代わりリンクは各画像の全体の列幅を占有しています。これは、リンクが現在（赤い線なしを除く）のように見えるものです：

私は、様々な "表示" スタイルで

<a href="#" style="width:225px; display=block;"><img class= ... [etc.] 

をやってみました。しかし、私は、画像が列内の中心にくるようにすることはできず、画像上にリンクがあふれないようにすることができませんでした。

Answer 1

imgとH2をクリック可能にし、各セルに「セル」を含むようにしてテキストが画像の幅を超えないようにすることができます。

aを削除し、h2とimgの両方を残りのaの内側に配置しました。 aにmax-widthとdisplay:inline-blockを設定することで、コンテンツが展開されないようにすることができます。

.col-lg-4 {display:inline-block;} 
 

 
a { 
 
    display:inline-block; 
 
    text-align:center; 
 
    max-width:225px; 
 
}

<div class="row"> 
 
     <div class="col-lg-4"> 
 
      <a href="#"> 
 
       <h2 align="center">Education and Outreach</h2> 
 
       <img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="Several remote-sensing-related words on a black background."> 
 
      </a> 
 
      <br /> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      <a href="#"><h2 align="center">Imagery</h2> 
 
      <img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="A satellite image of the Earth."></a> 
 
      <br /> 
 
     </div> 
 
     <div class="col-lg-4"> 
 
      <a href="#"><h2 align="center">Remote Sensing Resources</h2> 
 
      <img class="img-responsive center-block" src="http://via.placeholder.com/225x228" style="width:225px;height:228px;" alt="stylized stream of zeroes and ones emanating from a central globe."></a> 
 
      <br /> 
 
     </div> 
 
    </div>