Question

我创建了一个div并且我在其上放置了一个图像，div是全宽度，隐藏了溢出，图像比屏幕大，并且它完美地工作，因为它不会创建滚动条，事情是我想要的将该div用作flexbox，但发生了一些奇怪的事情，图像被挤压了。我在IE上打开它并且它正在工作，但它正在工作，因为IE不包装内容如果它比包装器的大小更大，我们需要添加flex-wrap，但我不会因为IE我正如我想要的那样工作，就像隐藏溢出的div一样，我试图在其他地方添加flex-wrap: nowrap;来强制firefox / chrome / opera像IE一样工作，但它确实没有。

如何让flexbox不要在firefox / chrome / opera上挤压图像？

<div class="wrapper">
  <img src="http://teleseries.com.br/wp-content/uploads/2014/04/Friends_S3_00233601_7a717bd.jpeg" alt="..."/>
</div>

body {
    margin: 0;
}

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

You can see it here

Answer 1

我不确定你想要什么，但我认为你想要完整的图像显示在IE和中心不被挤压如果是这样的代码，如果不是你能解释更多，我会尝试得到它对你而言。

body {
      margin: 0;
      padding: 0;
     }

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.wrapper > img{
      height: 100%;
      top: 0;
      bottom: 0;
      position: relative;
}

flexbox中的图像被挤压

1 个答案:

让我知道，因为我对这篇技巧感兴趣