flexbox内的图像被挤压答案

【问题标题】：Image inside flexbox squeezedflexbox内的图像被挤压
【发布时间】：2015-08-19 18:45:36
【问题描述】：

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

【问题讨论】：

嗯，这是一个肮脏的修复，但您可以手动将 html 中的图像宽度设置为 100%。 IE。将 style="width:100%" 添加到图像元素。
其实我并没有觉得它很脏，它在这里有点工作，但小图像会出现问题。另一个问题是不建议在浏览器上调整图像大小。 - 我会等待其他答案，如果除了你之外没有人帮助，我会坚持那个。谢谢。
我刚发现一个问题，全宽的图片没有得到想要的高度，如果我把高度又挤了。
这个问题被问了很多次，但是我还没有看到任何好的解决方案，你可以用背景图片代替吗？意味着包装器必须有一个高度，或者只是放下 flex。
不幸的是我也没有找到解决方案。我认为在这种情况下，flexbox 应该像在 IE 中一样，没有包装，如果这个人想要包装，只需使用 flex-wrap 并完成。在这种情况下，我放弃了 flexbox，并使用绝对位置和相对位置来定位图像和其他东西。

标签： html css flexbox

【解决方案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;
}

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

【讨论】：