CSS absolute positioning Asp.net MVC

Someone knows what is happening. The image (addf) with absolute position does not respect its container.

<div style="width: 100px; height: 100px; position: relative;">
    <img src="~/Imagenes/addf.png" style="width:100%; height:auto; position:absolute; "/>
</div>

The background image should have a size of 100x100px

  

Does anyone know what is happening?

What happens is that when you use an element with absolute position, you have to declare the parent who will be the reference element (for the size and positioning), but the element with absolute position will to take as reference the total size of the window or viewport or the ancestor that you define as a reference.

Simply add them to the container element having a position: relative and

.contenedor-imagen{
  width: 100px;
  height: 10px;
  position: relative;
}

.contenedor-imagen .imagen-contenida
/*o simplemente .contenedor-imagen img*/
{
  width: 100%;
  height: auto; 
  position: absolute;
}

I know you did not ask and you have your reasons, but better than to give styles to elements use css classes in an external file that you assign to each label, as follows:

<div class="contenedor-imagen">
    <img src="~/Imagenes/addf.png" class="imagen-contenida"/>
</div>

So you just have to add this class to each html tag need to fulfill the function of container and non-repeating images like crazy code unnecessarily. Example:

<div style="width: 100px; height: 100px; position: relative;">
    <img src="~/Imagenes/addf.png" style="width:100%; height:auto; position:absolute; "/>
</div>