Question

我使用flex box模型进行网站布局以显示一组图像。这些图像都具有不同的宽高比，因此为了使它们都具有相同的比例，我使用this技术。它在除Firefox之外的所有浏览器上都能正常工作，其中div的高度会崩溃。这个问题似乎与弹性箱模型有关，因为当display:flex专有权被转换时，div再次呈现正确的高度。

codePen，例如：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似乎解决了FF中的问题。

问题是填充技巧对FF中的flex项目不起作用，为flex项目子项做

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

Answer 2

要使图像保持原始宽高比，最好有一个周围的<div>容器，其宽度或高度设置为像素（取决于纵向或横向），另一个容器获取{{ 1}}。 <auto本身获取如下设置。所有这些都与flexbox无关。

<img>

OR：

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

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

Firefox中的Flex Box和响应式宽高比问题

2 个答案: