flex 动态高度适合图像

Question

由于 flex，需要将 img 放入动态计算的 li 高度。目前它需要所有高度，并拉高内容。图像应该刚好适合动态计算的 LI 高度，例如50px 并适应它。

不需要硬编码的高度。页面在任何设备中都应为 100%。页眉/页脚 - 弹性：1，主要 - 弹性：3。

body,
ul {
  margin: 0;
  padding: 0;
}

html,
body,
.root {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
}

main {
  flex: 3;
  background: lightyellow;
}

ul {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ul li {
  flex: 1;
  background: aliceblue;
  outline: 1px solid #000;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

img {
  /* object-fit: contain; */
}

header,
footer {
  flex: 1;
}

header {
  background: lightgray;
}

footer {
  background: lightblue;
}

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

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

堆栈sn-p

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>