Firefox 中的 Flex Box 和响应式纵横比问题

Question

我在我的网站布局中使用 flex box 模型来显示一组图像。这些图像都有不同的纵横比，所以为了让它们都具有相同的纵横比，我使用了 this 技术。它在除 firefox 之外的所有浏览器上都能正常工作，其中 divs 的高度崩溃了。问题似乎与 flex box 模型有关，因为当关闭 display:flex 属性时，div 会再次假设正确的高度。

codePen with example here: http://codepen.io/postcom/pen/eJZVLE

有人对此有什么建议吗？

HTML

<div id="container">
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
</div>

CSS

#container {
    width: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    background-color: yellow;
}

.link {
    display: block;
    width: 27%;
    box-sizing: border-box;
    margin: 30px;
    padding-bottom: 30%;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: blue;
}

.link .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

Answer 1

为了使图像保持原始纵横比，最好有一个环绕的 <div> 容器，其宽度或高度以像素为单位设置（取决于纵向或横向），另一个为 <auto. <img> 本身的设置如下。所有这些都独立于 flexbox。

.container {
height: 200px;
width: auto;
}

.container > img {
height: 100%;
width: auto;
}

或：

.container {
width: 200px;
height: auto;
}

.container > img {
width: 100%;
height: auto;
}

Answer 2

添加一个额外的 div 似乎可以解决 FF 中的问题。

问题是填充技巧对 FF 中的弹性项目不起作用，请对弹性项目子项执行此操作

#container {
  width: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  background-color: yellow;
}
.link {
  display: block;
  width: 27%;
  box-sizing: border-box;
  margin: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: blue;
}
.wrapper {
  padding-bottom: 100%;
}
.link .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
}

<div id="container">
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
</div>

Firefox 中的 Flex Box 和响应式纵横比问题

Flex Box and responsive aspect ratio issue in Firefox

css

flexbox

responsive-design