画像上のリンクは画像タグを拡張します

私のhrefリンクが私の画像を拡大する理由を理解できません。私は写真の幅と高さを設定しました。 My Example Site。私はstackoverflowの周りを見て、私はまたhrefの高さと幅を設定しようとしました。画像上のリンクは画像タグを拡張します

私がテーブルを使用する理由は、電子メールの基礎フレームワークに基づいています。

私のコードは次のように探しています：

HTML

<body> 
    <table class="body"> 
    <tr> 
     <td class="center" align="center" valign="top"> 
     <!-- Logo Start --> 
      <table align="center" class="wrapper header float-center background-color__blue"> 
       <tbody> 
       <tr> 
        <td class="wrapper-inner"> 
        <table align="center" class="container" style="background-color:transparent"> 
         <tbody> 
         <tr> 
          <td> 
          <table class="row collapse"> 
           <tbody> 
           <tr> 
            <th> 
            <a href="https://www.google.dk/"><img src="https://3.imimg.com/data3/HR/NW/MY-18669487/english-images-2-5-animal-care-20p-26s-250x250.jpg" alt="Some text" align="center" class="float-center" width="250" height="80"></a> 
            </th> 
            <th class="expander"></th> 
           </tr> 
           </tbody> 
          </table> 
          </td> 
         </tr> 
         </tbody> 
        </table> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
      <!-- Logo End --> 
     </td> 
    </tr> 
    </table> 
</body>

出典

2017-01-31 KrMa

リンク画像の境界をエスケープしていないために、あなたはa要素にdisplay: inline-block;を設定する必要があります。

a { 
    display: inline-block; 
}

これは、画像の位置を崩してしまうことに注意してください。それを固定するために、あなたはまた、th要素にtext-align: centerを設定する必要があります：あなたはまた、th要素にline-heightを設定

th { 
    text-align: center; 
}

。あなたがイメージがth高さの100％を取るしたい場合は、どちらかがこれを削除する必要がある、または0.7に設定し：

th { 
    line-height: 0.7; 
}

・ホープこのことができます！

出典

2017-02-01 00:07:07

これで解決しました。大いに感謝する – KrMa

画像上のリンクは画像タグを拡張します

答えて

関連する問題