0

Estoy insertando imágenes en un html. El problema es que me encuentro que me sale una zona gris en las fotos que son más pequeñitas y me gustaría que desapareciera.

Actualmente este es el CSS que tengo.

<ion-img max-width="100%" height="150" src="{{element.image}}"></ion-img>

¿Cómo podría solucionarlo?

1 respuesta 1

5

Cuando tienes imágenes con distintas resoluciones lo mejor es forzar el ancho o el alto al 100% y fijar el otro valor a un tamaño fijo, aunque también puedes forzarlo al 100% y hacer uso de la propiedad object-fit para adaptar la imagen sacrificando los márgenes de esta.

con tu código podrías hacer algo así:

html:

<ion-img src="{{element.image}}"></ion-img>

css / scss:

ion-img{
  width: 100%;
  height: 150px;
  object-fit: cover;
}

Aunque también podrías poner el width y height al 100% y el object-fit se encargaría de estirar tu imagen para que todas tengan el mismo tamaño. Como dato extra también existe una propiedad object-position que te permite elegir qué parte de tu imagen quieres que se centre. Sus valores pueden variar entre center, bottom... Puedes ver más información acerca de object-fit y object-position en este enlace

2
  • Muchas gracias por el aporte. La verdad no entiendo la cantidad de negativos a la pregunta. Para que lo entienda html, se debe declarar como: ion-img img {}. Gracias!
    – David_helo
    Commented el 13 may. 2019 a las 18:06
  • Cierto, ionic genera dentro del elemento ion-img una imagen. También se puede crear con una clase de css en lugar de con la referencia a la etiqueta
    – David
    Commented el 14 may. 2019 a las 6:22

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.