我怎样才能收缩图像以适应父母设定高度内的所有弹性孩子

Question

是否可以缩小中间图像（使用 flex-box），以便当header中的内容、 footer增长时缩小，从而使 flex 子项（ header 、 footer 、 img-wrap ）的总内容高度不会溢出父级容器？

CodePen中布局的当前视图

任何帮助表示赞赏。 谢谢。

 * { 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>

Answer 1

我不经常求助于绝对定位，但它适用于现在位于flex 子项内的图像容器。 请注意，还必须在父元素上设置非静态定位。

此外，我没有纠结于flex-grow和-shrink值，我只是在各种 flex 子项上使用flex: auto和flex: none 。 没有必要在所有情况下都使用它，但当我在 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>

Answer 2

您可以为此使用display: grid 。

检查object-fit: cover; 对于图像，这样它就不会挤压，并且使用此解决方案，图像会保持居中，而不仅仅是在下方切割。

这对我的笔有用吗？ 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>

Answer 3

检查代码中的更新：

 * { 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>