Question

我无法弄明白，如何在Firefox中使用flexbox创建垂直对齐的图像。

我的代码在Safari中运行

但不是在Firefox中：

在缩小窗口时，图像重叠与父div重叠。

这是我的css：

    .wrapper {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 10px;
      right: 10px;
      border: 1px solid red;
      padding: 10px;
      }

      .flexbox {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid green;
      }

      .flex-child {
      border: 2px solid blue;
      }

      .flex-child img {
      max-width: 100%;
      max-height:100%;
      height: auto;
      }

这里是html：

    <div class="wrapper">
      <div class="flexbox">
        <div class="flex-child">
          <img src="http://dummyimage.com/800X600/000/fff">
        </div>
      </div>
    </div>

指向JSFiddle的链接。

Answer 1

也许这不是最好的解决方案，但至少它适用于Chrome，Safari和Firefox：

HTML：

<div class="wrapper">
</div>

CSS：

.wrapper {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border: 1px solid red;
  padding: 10px;
  background: url("http://dummyimage.com/800X600/000/fff") no-repeat center center;
  background-size: contain;
}

JSFiddle

如何使用flexbox在Firefox中显示响应式图像

1 个答案: