Mostrar imagen sin importar como fue sacada originalmente

#1 · April 28, 2022, 7:58 pm

Es algo que me tiene complicado, quiero mostrar una imagen en un objeto imagen desde una URL sin importar si fue sacada horizontal o vertical, que se muestre sin estirar manteniendo las proporciones pero cubriendo todo el objeto imagen, sin bordes negros, no se si logro explicarme

#2 · April 29, 2022, 10:37 am

@gustavo1973 tiene un poco de truco, pero es muy fácil. Te adjunto un ejemplo.

Crea un Container.
Pon un objecto Image dentro del Container.
Quítale al objeto Image estas propiedades (dejalas vacias): source, width, height, top, left.
Añade esta clase CSS al objeto Image: neo-middle-center
Pon las propiedades max-width y max-height del objeto Image en 100%

A partir de ahora cualquier imagen que cargues en el objeto Image se ajustará para quedar siempre centrada dentro del Container independientemente de su tamaño.

Saludos!

Uploaded files:

You need to login to have access to uploads.

Vadim and roccocogliano have reacted to this post.

#3 · April 29, 2022, 11:15 am

Great!!!
Just what I needed.
This forum is a gold mine. =)

Thanks a lot @luishp

luishp has reacted to this post.

Mostrar imagen sin importar como fue sacada originalmente - Forum

Mostrar imagen sin importar como fue sacada originalmente