Flexbox中的图像高度在IE中不起作用 [英] Image height in flexbox not working in IE

问题描述

我有一个flex行，包含5个flex单元格，其中包含一个应该在中间对齐的图像。

Chrome和Firefox，但它不在IE。它没有得到好的比率。换句话说，当图像在弹性盒中时， height：auto 在IE中不起作用。

已经为图像尝试了一些 flex：none; ，或者将图像包装在另一个 div 中。没有什么工作。

我想要它与良好的比率和完全居中：

这里是一个jsFiddle： a href =https://jsfiddle.net/z8op323f/5/ =nofollow> https://jsfiddle.net/z8op323f/5/

  .grid-row {width：300px; height：300px;显示：flex; margin：auto;}。grid-cell {height：100％;宽度：25％; transition：box-shadow 2s; display：flex;} img {width：60％; margin：auto; height：auto！important; min-height：1px;}。long {width：80％; height：auto！important;}  

 < div class = grid-row> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div>< / div>  

解决方案

height：auto 只是指内容的高度。这是一个默认值;

如果从代码中删除 height：auto t更改任何内容（在任何浏览器中）。

根据规范： 10.5内容高度： height 属性

< hr>

问题似乎是在Chrome和FF中遵守 margin：auto 。但是在IE 11 / Edge中（大部分）被忽略。

这可能是一个错误。 IE11尤其已知有许多 flexbug ：

• https://github.com/philipwalton/flexbugs


• http://caniuse.com/#search=flexbox （请参阅已知问题标签）

---

一个简单的跨浏览器解决方案是使用 margin：auto / p>

而不是flex项目上的此代码：

  img {
 margin：auto; 
} 
  

在flex容器上使用：

  .grid-cell {
 display：flex; 
 justify-content：center; 
 align-items：center;更多详细信息，请参见框＃56，其中：http://stackoverflow.com/a/33856609/3597276  
 
 
 
  修订的小提琴  
 
 
 
 
 
 
  .grid-row {width：300px; height：300px;显示：flex; margin：auto;}。grid-cell {height：100％;宽度：25％; transition：box-shadow 2s;显示：flex; justify-content：center; / * NEW * / align-items：center; / * NEW * /} img {width：60％; / * margin：auto; * / / * height：auto！important; * / min-height：1px;}。long {width：80％; / * height：auto！important; * /}  
 
 < div class =grid-row > < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div> < div class =grid-cell> < img class =longsrc =http://placehold.it/350x500> < / div>< / div>  
 
 
 
 
I have a flex "row" that contains 5 flex "cells" that contains an image which is supposed to be aligned in the middle.

It works perfectly in Chrome and Firefox, but it doesn't in IE. It doesn't get the good ratio. In other terms, height:auto doesn't work in IE when the image is in a flexbox.

I already tried several things like flex:none; for the image or wrap the image in another div. Nothing works.

I want it with the good ratio and fully centered:

Here is a jsFiddle: https://jsfiddle.net/z8op323f/5/



.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
}
img {
  width: 60%;
  margin: auto;
  height: auto !important;
  min-height: 1px;
}
.long {
  width: 80%;
  height: auto !important;
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>



解决方案
height: auto simply means the height of the content. It's a default value; you don't need to specify it.

If you remove height: auto from your code, it doesn't change anything (in any browser).

From the spec: 10.5 Content height: the height property



The problem appears to be that margin: auto is respected in Chrome and FF. But it is being (mostly) ignored in IE 11/Edge.

This is probably a bug. IE11 in particular is known to have many flexbugs:


https://github.com/philipwalton/flexbugs
http://caniuse.com/#search=flexbox (see "Known issues" tab)




A simple cross-browser solution would be to use a margin: auto equivalent:

Instead of this code on the flex item:
img {
    margin: auto;
}
Use this on the flex container:
.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}
For more details see box #56 here: http://stackoverflow.com/a/33856609/3597276

Revised Fiddle



.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
  justify-content: center;    /* NEW */
  align-items: center;        /* NEW */
}
img {
  width: 60%;
  /* margin: auto; */
  /* height: auto !important; */
  min-height: 1px;
}
.long {
  width: 80%;
  /* height: auto !important; */
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>





                        
这篇关于Flexbox中的图像高度在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！