Alguien sabe que es lo que pasa. La imagen (addf) con posición absoluta no respeta a su contenedor.
<div style="width: 100px; height: 100px;">
<img src="~/Imagenes/addf.png" style="width:100%;height:auto;position:absolute"/>
</div>
Alguien sabe que es lo que pasa. La imagen (addf) con posición absoluta no respeta a su contenedor.
<div style="width: 100px; height: 100px;">
<img src="~/Imagenes/addf.png" style="width:100%;height:auto;position:absolute"/>
</div>
Alguien sabe que es lo que pasa?
Lo que pasa es que cuando usas un elemento con posición absoluta, tienes que declararle al padre que va a ser el elemento referente (para el tamaño y posicionamiento), sino el elemento con posición absoluta va a tomar como referente el tamaño total de la ventana o viewport o el ancestro que si definas como referente.
Basta con que agregues al elemento contenedor un position: relative, así:
<div style="width: 100px; height: 100px; position: relative;">
<img src="~/Imagenes/addf.png" style="width:100%; height:auto; position:absolute; "/>
</div>
Se que no lo preguntaste y tus motivos has de tener, pero es mejor que para darle estilos a los elementos uses clases en un archivo css externo que asignes a cada etiqueta, así:
.contenedor-imagen{
width: 100px;
height: 10px;
position: relative;
}
.contenedor-imagen .imagen-contenida
/*o simplemente .contenedor-imagen img*/
{
width: 100%;
height: auto;
position: absolute;
}
Así solo tienes que agregar esta clase a cada etiqueta html que necesite que cumpla la función de contenedor de imágenes y no repites a lo loco código innecesariamente. Ejemplo:
<div class="contenedor-imagen">
<img src="~/Imagenes/addf.png" class="imagen-contenida"/>
</div>