el siguiente es mi código de error, primero se anula "text1"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .it { display: flex; flex-direction: column; width: 100px; height: 100px } .it *:first-child { flex-grow: 1; background-color: pink; } .it img { object-fit: contain; } </style> </head> <body> <div class="it"> <img src="https://i.stack.imgur.com/rtDch.jpg"/> <!-- <div>img1</div>--> <div>text1</div> </div> <div class="it"> <img src="https://i.stack.imgur.com/rtDch.jpg"/> <!-- <div>img2</div>--> <div>text2</div> </div> </body> </html>
pero espero mostrar img + img texto de nombre
Sé que puedo configurar la altura de img para que se muestre el texto, pero aún quiero encontrar la manera de llenar el espacio de descanso de flexbox
siguiente es mi código img.jpg
Para estar 100% seguros, necesitaríamos un ejemplo de trabajo. Pero lo más probable es que el problema sea que le da 100px a su contenedor combinado con flex-grow
y probablemente una imagen de al menos 100x100 si no más grande.
Mi mejor suposición es que la imagen renderizada toma al menos 100 px de altura y el div .it
se desborda (empujando el texto fuera del alcance).
Tienes algunas opciones para lidiar con esto. Lo más fácil sería darle a la imagen una altura fija en lugar del contenedor (pero la mejor solución depende mucho de lo que necesites)
(o al menos darle una altura máxima de maxheight
- 1 línea de texto)
¿También puedes cambiar de .it *:first:child
a .it > img
? Tenga en cuenta que .it *:first:child
también se activará para los niños anidados (por lo que <div class="it"><div><span>this will also be catched</span></div></div>
)
EDITAR: Creo que algo como esto es lo que estás buscando:
.it { display: flex; flex-direction: column; width: 100px; height: 100px; } .it > div:first-child { display: flex; height: 0; flex: 1 1 0; justify-content: center; background-color: pink; } .it img { object-fit: contain; }
<div class="it"> <div> <img src="https://i.stack.imgur.com/rtDch.jpg"/> </div> <div>More text here</div> <div>text1</div> </div> <div class="it"> <div> <img src="https://i.stack.imgur.com/rtDch.jpg"/> </div> <div>text2</div> </div>
Explicación: para obligar a su imagen a llenar solo el espacio restante, envuelva la imagen en un contenedor flexible y dele una altura de 0. De esta manera, los otros elementos definitivamente llenarán el espacio del contenedor .it
(ya que su contenedor de imagen tiene altura 0). Después de darle flex-grow: 1
para que crezca y llene el espacio vacío restante (las últimas 2 líneas dentro de .it > div:first-child {...}
son, por supuesto, opcionales)