Internet Explorer在flexbox中拉伸圖像

Question

我想用2個部分創建全高度部分。

第一個是文本，第二個是圖像。

我正在使用flexbox，它在Chrome，FF，Edge中運行良好，但在IE中卻不行。

 #super { height: 100vh; } #super #el-1 { display: flex; flex-flow: column; height: 100%; } #super #el-1 .above, #super #el-1 .below { display: flex; flex-flow: column; align-items: center; } #super #el-1 .above { text-align: center; padding: 100px 0; } #super #el-1 .below img { width: 60%; max-width: 100%; height: auto; vertical-align: middle; } 

 <div id="super"> <div id="el-1"> <div class="above"> <h1>Some crazy text here!!!</h1> <h2>Wow a second line - amazing :o</h2> </div> <div class="below"> <img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"> </div> </div> </div> 

https://jsfiddle.net/0cw3epzv/

Answer 1

IE因許多彈片而臭名昭着。 它對於非常簡單的flex布局是可靠的。 但即使是最輕微的復雜性，IE也需要“特別關注”（即丑陋的黑客攻擊）。

在這種特殊情況下，IE似乎需要對圖像的父級進行高度限制：

而不是這個：

.below { }

img {
    width: 60%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

嘗試這個：

.below {
    flex: 0 0 200px; /* flex-basis: 200px (demo value only) */
}

img {
    height: 100%;
    /* flex: 0 0 100%;  <--- this should work also, but it doesn't */
}

修改過的小提琴

Answer 2

為避免瀏覽器兼容性，您可以嘗試此選項。 我所做的是從“.below”類中刪除flex並將img元素置於其中。 希望能幫助到你

#super {

  height: 100vh;

  #el-1 {

    display: flex;
    flex-flow: column;
    height: 100%;

    .above {
      display: flex;
      flex-flow: column;
      align-items: center;
    }
    .below {
      text-align: center;
    }

    .above {
      text-align: center;
      padding: 100px 0;
    }

    .below {

      img {
        width: 60%;
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }

    }

  }

}