0

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>

La imagen de fondo debería tener un tamaño de 100x100px La imagen de fondo debería tener un tamaño de 100x100px

1 respuesta 1

0

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>
1
  • voy a probar, gracias por tu ayuda. Commented el 11 ene. 2018 a las 18:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.