Problème lors de l'affichage d'une image plus petite sur une image plus grande

Question

Je souhaite donner une image plus petite dans le coin supérieur droit d'une image plus grande générée dynamiquement.

J'essaie staticcally en donnant largerimage comme image de fond à td comme

<table> 
    <tr> 
     <td width="220px" style="background-img: url(image url); background-repeat: no-repeat; height: 150px;" valign="top"> 
      <table width="100%"> 
       <tr style="height: 10%; width: 10%" valign="top"> 
        <td width="50%"> 
        </td> 
        <td width="20px" style="background-img: url(image url); background-repeat: no-repeat; height: 20px;"> 
        </td> 
       </tr> 
       <tr style="height: 90%"> 
        <td> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

mais dans mon code l'image est affichée dans div comme

<div style="height: 158px; width: 210px" onload="fun();"> 
    <a id="aproduct" runat="server"> 
    <image tag id="pimage" runat="server" width="210" height="158" border="0" />          
</div> 

comment afficher sur cette l'image plus petite

Answer 1

Vous pouvez positionner la plus petite image absolument sur l'image la plus grande. D'abord, vous devez donner à votre div position: relative pour fixer un cadre de référence, alors vous pouvez utiliser position: absolute pour positionner votre plus petite image. Exemple:

<div style="height: 158px; width: 210px; position: relative;" onload="fun();"> 
    <a id="aproduct" runat="server"> 
     <img id="pimage" runat="server" width="210" height="158" border="0" /> 
    </a> 

    <!-- Here's the small image. Adjust top and left. --> 
    <img style="position: absolute; top: 10px; left: 10px;" src="url/to/image.jpg" /> 
</div>