Question

由于 flex ，需要使 img 符合 li 的动态计算高度。目前，它需要所有高度和拉高内容。图像应恰好适合动态计算的LI高度，例如： 50px并适合它。

不需要硬编码高度。任何设备中的页面应为100％。页眉/页脚 - flex：1，main - flex：3。

＆＃13;

<div class="root">
  <header>
    HEAD
  </header>

  <main>
    <ul>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
      <li>
        <img src="http://via.placeholder.com/200x200" />
        <span>text</span>
      </li>
    </ul>
  </main>

  <footer>
    FOOTER
  </footer>
</div>

＆＃13;

QueueClient

＆＃13;

https://jsfiddle.net/sefb3o95/18/

Answer 1

使这项工作的主要方法是一直使用Flexbox。

简单地说，需要嵌套flex父/子而不是使用height: 100%，以利用Flexbox自己的属性使其flex子项拉伸/填充父母，原因是height: 100%不能正常工作。

此外，将img作为弹性项目会导致一些跨浏览器问题，因此请将其包装并为其指定max-height: 100%，并且它将正确调整大小。

在CSS中查看我的笔记。 Firefox的min-height: 0修复程序在此处得到了很好的解释：

Why don't flex items shrink past content size?

Updated fiddle

Stack snippet

body,
ul {
  margin: 0;
  padding: 0;
}

html,
body,
.root {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
}

main {
  flex: 3;
  background: lightyellow;
  display: flex;                 /*  added  */
  flex-direction: column;        /*  added  */
  min-height: 0;                 /*  added, Firefox need this  */
}

ul {
  display: flex;
  flex-direction: column;
  min-height: 0;                 /*  added, Firefox need this  */
}

ul li {
  flex: 1;
  background: aliceblue;
  outline: 1px solid #000;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  min-height: 0;                 /*  added, Firefox need this  */
}

img {
  max-height: 100%;              /*  added  */
}

header,
footer {
  flex: 1;
}

header {
  background: lightgray;
}

footer {
  background: lightblue;
}

<div class="root">
  <header>
    HEAD
  </header>

  <main>
    <ul>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
      <li>
        <span>
          <img src="http://via.placeholder.com/200x200" />
        </span>
        <span>text</span>
      </li>
    </ul>
  </main>

  <footer>
    FOOTER
  </footer>
</div>

柔性动态高度拟合图像

1 个答案: