0
136
Vistasimg establece flex-grow para llenar el espacio de descanso del contenedor flexible, causa el contenedor flexible de desbordamiento interno flexible
el siguiente es mi código, "text1" desborda el contenedor flexible, espero img + texto en el contenedor flexible e img rellena el resto del contenedor flexible
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .c { display: flex; flex-direction: column; width: 100px; height: 100px; border: 5px solid lightblue; } .c img { flex-grow: 1; object-fit: contain; } </style> </head> <body> <div class="c"> <img src="./img.jpg"/> <div>text1</div> </div> </body> </html>el resultado es:
si el elemento no es img y es div, flex-grow: 1 llenará el espacio de descanso flexible, estoy confundido por qué img causa un desbordamiento interno
siguiente es mi "img.jpg"
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
agregue este código a la imagen de su código
.c img{ flex-grow: 1; object-fit: contain; flex-basis:100%; width:100%; }
·
Juan Pablo Isaza
Denunciar
0
/* CSS */ .c { width: 100px; height: 100px; border: 5px solid lightblue; position: relative; text-align: center; } .c img { width: 100%; } .c div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red; } <!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=yes"> </head> <body> <div class="c"> <img src="https://i.stack.imgur.com/P5N3A.jpg" /> <div>text1</div> </div> </body> </html>
·
Juan Pablo Isaza
Denunciar
0
Mis disculpas, entendí mal su pregunta.
Hay formas más simples de hacer esto. Podrías hacerlo con background-image :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .c { display: flex; flex-direction: column; width: 100px; height: 100px; background-image: url('https://i.stack.imgur.com/P5N3A.jpg'); background-repeat: no-repeat; background-size: contain; } </style> </head> <body> <div class="c"> <div>text1</div> </div> </body> </html> O podrías hacerlo con <figure> & <figcaption> :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .c { display: flex; width: 100px; height: 100px; position: relative; } figcaption { color: white; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <figure class="c"> <img src="https://i.stack.imgur.com/P5N3A.jpg"> <figcaption>text1</figcaption> </figure> </body> </html>¡Espero que esto ayude!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta