0
252
Views¿Cómo puedo flexionar la imagen retráctil para que se ajuste a todos los niños flexibles dentro de la altura establecida por los padres?
¿Es posible reducir la imagen del medio (usando el cuadro flexible) de modo que cuando el contenido en el header , el footer de página crezca, se reduzca de tal manera que la altura total del contenido de los elementos secundarios flexibles ( header , footer de página, img-wrap ) no se desborde fuera del padre? ¿envase?
Vista actual del diseño en CodePen
Cualquier ayuda es apreciada. Gracias.
* { box-sizing: border-box; } p, h4 { margin: 0; } .wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; } .wrapper .header, .wrapper .footer { flex-grow: 1; flex-shrink: 0; } .header { background: lightskyblue; } .img-wrap { border: 1px solid black; flex-grow: 0; flex-shrink: 3; min-height: auto; } .img-wrap img { max-width: 100%; width: 100%; width: auto; height: 100%; height: auto; vertical-align: bottom; } .footer { border: 1px solid green; } .footer .btn { display: block; width: 95%; margin: 0 auto; padding: 10px; } <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>3 answers
Answer question0
No suelo recurrir al posicionamiento absoluto, pero funciona aquí en el contenedor de la imagen, que ahora está dentro del niño flexible. Tenga en cuenta que el posicionamiento no estático también debe establecerse en el elemento principal.
Además, en lugar de luchar con los valores flex-grow y -shrink , solo uso flex: auto y flex: none en los diversos flex child. No es necesario usarlo en todos los casos, pero hace que el comportamiento del diseño me resulte más intuitivo cuando lo veo en el CSS.
* { box-sizing: border-box; } p, h4 { margin: 0; } .wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; } .wrapper .header, .wrapper .footer { flex: none; } .header { background: lightskyblue; } .content { border: 1px solid black; flex: auto; position: relative; } .img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } .img-wrap img { max-width: 100%; max-height: 100%; vertical-align: bottom; } .footer { flex: none; border: 1px solid green; } .footer .btn { display: block; width: 95%; margin: 0 auto; padding: 10px; } <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="content"> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>0
Puede usar display: grid para este.
Verifique el object-fit: cover; para la imagen para que no se apriete y con esta solución, la imagen permanece centrada y no solo se corta por debajo.
¿Funciona esto con mi bolígrafo? https://codepen.io/maki3000/pen/BamgxaB?editors=1100
* { box-sizing: border-box } p, h4 { margin: 0; } .wrapper { display: grid; grid-template-rows: 1fr minmax(10px, auto) 1fr; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; } .header { background: lightskyblue; } .img-wrap { border: 1px solid black; width: 100%; height: 100%; } .img-wrap img { width: 100%; height: 100%; object-fit: cover; } .footer { border: 1px solid green; } .footer .btn { display: block; width: 95%; margin: 0 auto; padding: 10px; } <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>0
Compruebe las actualizaciones en el código:
* { box-sizing: border-box; } p, h4 { margin: 0; } .wrapper { display: flex; flex-direction: column; width: 200px; height: 200px; border: 1px solid red; border-radius: 5px; } .wrapper .header, .wrapper .footer { flex-grow: 1; flex-shrink: 0; } .header { background: lightskyblue; } .img-wrap { border: 1px solid black; flex-grow: 0; flex-shrink: 3; min-height: 0; /* 0 instead of auto */ } .img-wrap img { width: 100%; height: 100%; object-fit: contain; /* use object fit */ } .footer { border: 1px solid green; } .footer .btn { display: block; width: 95%; margin: 0 auto; padding: 10px; } <div class="wrapper"> <div class="header"> <h4>Box title</h4> <p>Some blurb text Some blurb text Some blurb text Some blurb text </p> </div> <div class="img-wrap"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt=""> </div> <div class="footer"> <button class="btn">My button</button> </div> </div>