Cómo igualar altura de div a imagen sin carga

  • Autor Autor YeltsinReyes
  • Fecha de inicio Fecha de inicio
YeltsinReyes

YeltsinReyes

Mi
Verificación en dos pasos activada
Verificado por Binance
¡Usuario popular!
Tengo varios post en cascada donde muestro solo la imagen de portada la cueles son de diferente tamaño pero con el ancho en 100% y lo que quiero lograr es que cuando los div se muestren ya tengan el mismo tamaño de alto que tendra su imagen para que no se vea el efecto feo de que los div se van poniendo grande cuando las imagenes van cargando??
 
No entendí muy bien, :topsy_turvy: pero lo que deseas es que todas las imagenes destacada de tu entradas tengan el mismo alto.

Para eso hay dos soluciones:

1.- Trabajas de manera diseñador en photoshop y hacer imagen por imagen que sean el mismo tamaño, quiere decir que puedes usar el mismo fondo y un filtro de "desenfoque gauseano" para que así todos tengan el mismo tamaño al subir. (Esta hace verlo de manera correcta pero es trabajosa).

Screenshot_1.webp


2.- Revisas el CSS de tu Div que controla las imagenes y aplicas "max-height: 100px; overflow-y:hidden;" al tamaño de imagen mas bajo que tengas. Esta es una solución rápida, pero recortas las imagenes mas grandes y puede afectar si estas usan imágenes con texto.
 
Última edición:
[MENTION=43377]Hosting Web Perú[/MENTION] Hola man, mis entradas se ven como esta imagen de ejemplo y lo que quiero lograr es que el div ya tenga el tamaño de la imagen que se cargara dentro de el, porque cuando entro a la pagina los div tienen 0px de alto, ellos se ponen grande cuando su imagen interna carga.

Ya entiendes???
grid-masonry.webp
 
Última edición:
YeltsinGraphs dijo:
Hola man, mis entradas se ven como esta imagen de ejemplo y lo que quiero lograr es que el div ya tenga el tamaño de la imagen que se cargara dentro de el, porque cuando entro a la pagina los div tienen 0px de alto, ellos se ponen grande cuando su imagen interna carga.

Ya entiendes???
Hacer clic para expandir...


Si me indicas tu url por MP, pondré entender bien tu problema.

NOTA: Sucede que esos estilos no son solo CSS, sino JS que juegan con el tamaño acorde. Y como la altura varía, puedo decir que el ancho es el que se maneja.
Prueba modificando el ancho de una imagen en la cual tienes problemas por una que no. :encouragement:
 
Hosting Web Perú dijo:
Si me indicas tu url por MP, pondré entender bien tu problema.

NOTA: Sucede que esos estilos no son solo CSS, sino JS que juegan con el tamaño acorde. Y como la altura varía, puedo decir que el ancho es el que se maneja.
Prueba modificando el ancho de una imagen en la cual tienes problemas por una que no. :encouragement:
Hacer clic para expandir...

La web la tengo en localhost, entonce sera hacerlo con jquery?
Cojer el ancho y alto de la imagen y ponerselo al div padre??
 
YeltsinGraphs dijo:
La web la tengo en localhost, entonce sera hacerlo con jquery?
Cojer el ancho y alto de la imagen y ponerselo al div padre??
Hacer clic para expandir...

Me indicas que el div ya tiene un alto: 0px; para lo cual indica que trabaja con el ancho. Prueba usando imagenes del mismo ancho y me comentas :encouragement:
 
Hosting Web Perú dijo:
Me indicas que el div ya tiene un alto: 0px; para lo cual indica que trabaja con el ancho. Prueba usando imagenes del mismo ancho y me comentas :encouragement:
Hacer clic para expandir...

el div no tiene alto el se pone del mismo alto de la imagen cuando ella carga!
 
Tienes que darle un alto minimo a cada div con CSS, que sea igual a la altura de la imagen que va a cargar, para que el div desde el inicio tenga esa altura.

Lo que pasa es que tienes que saber que altura va a tener cada imagen, y si vas a estar usando imagenes de diferente altura a medida que vas haciendo nuevos articulos, un mismo div puede tener diferente altura cada vez que cargues el sitio.

En ese caso ya tendrias que ver una manera de ir alterando la altura del div de manera programatica utilizando una variable que contenga la altura de la imagen destacada del articulo via javascript o lo que sea que use tu theme... Y que esa variable altere el CSS, no se si eso sera posible, aunque seguramente que si :encouragement:
 
grangonzo dijo:
Tienes que darle un alto minimo a cada div con CSS, que sea igual a la altura de la imagen que va a cargar, para que el div desde el inicio tenga esa altura.

Lo que pasa es que tienes que saber que altura va a tener cada imagen, y si vas a estar usando imagenes de diferente altura a medida que vas haciendo nuevos articulos, un mismo div puede tener diferente altura cada vez que cargues el sitio.

En ese caso ya tendrias que ver una manera de ir alterando la altura del div de manera programatica utilizando una variable que contenga la altura de la imagen destacada del articulo via javascript o lo que sea que use tu theme... Y que esa variable altere el CSS, no se si eso sera posible, aunque seguramente que si :encouragement:
Hacer clic para expandir...

Si tratare con jquery a ver si puedo cojer el tama;o de la imagen y ponersela al div padre!
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba