html - 为什么将图像的宽度设置为由 css flexbox 排序的 div 内的百分比会增加额外的高度到 div？

Question

您可以在此处(在 firefox 中)看到使用百分比作为宽度的额外高度:

http://jsfiddle.net/080xzqub/

如果您改为设置像素宽度，它就没有额外的高度:

http://jsfiddle.net/080xzqub/1/

为什么会出现这种情况？我该如何解决这个问题？

编辑:这发生在 Firefox 中

HTML:

 <div class="a"></div>
 <div class="b">
    <img src="http://flamesnation.ca/uploads/Image/BlackBox.jpg" />
 </div>

带百分比的 CSS:

body
{
    display: -webkit-box;
    display: -moz-box;
    display: box;   
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

.a
{
    position: relative;
    height: 100px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background-color: red;
}

.b
{
    position: relative;
    height: 200px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background-color: yellow;
}

img
{
    position: relative;
    width: 60%;
}

具有像素宽度的 CSS:

body
{
    display: -webkit-box;
    display: -moz-box;
    display: box;   
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

.a
{
    position: relative;
    height: 100px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background-color: red;
}

.b
{
    position: relative;
    height: 200px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background-color: yellow;
}

img
{
    position: relative;
    width: 400px;
}

Answer 1

它正在缩放它，即两种情况下宽度和高度的比例是相等的。我认为你也必须定义高度

img
{
    position: relative;
    width: 60%;
    height: 60%; <- here
}