html - 压缩 flexbox 中的图像

Question

我创建了一个 div 并在其上放置了一个图像，该 div 是全宽的，隐藏了溢出，图像比屏幕大并且工作完美，因为它没有创建滚动条，这就是我想要的将该 div 用作 flexbox，但发生了一些奇怪的事情，图像被挤压了。我在 IE 上打开它，它可以工作，但它可以工作，因为如果内容大于包装器的大小，IE 不会包装内容，我们需要添加 flex-wrap，但我不会，因为 IE 正在按照我想要的方式工作，就像 overflow hidden 的 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;
}

让我知道，因为我对这个主题很感兴趣