コンテナの幅が固定されていない限り、IE11/EdgeでSVGイメージが正しく描画されない

Question

EdgeとInternet Explorer 11の両方がスケールの標準的なラスターイメージとは異なります。

は、次の例を見てみましょう：

.container { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 

 
.box { 
 
    flex: 0 1 auto; 
 
    background: red; 
 
} 
 

 
.fill { 
 
    flex: 1 0 auto; 
 
    background: green; 
 
} 
 

 
.box img { 
 
    display: block; 
 
    width: auto; 
 
    height: 150px; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    <img src="http://s33.postimg.org/hbl2jy69b/logo_light.png" alt="" /> 
 
    </div> 
 
    <div class="fill">fill</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="box"> 
 
    <img src="http://imgh.us/logo-light_1.svg" alt="" /> 
 
    </div> 
 
    <div class="fill">fill</div> 
 
</div>

を両方の画像が同じで、最初はPNGで、他はSVGです。両方の画像は、flex-shrinkに設定されていますが、flex-growに設定されていない.boxにあります。ボックスの隣に.fillがあり、flex-growに設定されていますが、flex-shrinkには設定されていません。

だから、そのアイデアは本当に簡単です。各画像の高さを固定値に設定し、画像の縦横比を維持して自動的に幅を計算します。画像の幅は、.boxコンテナの幅を丁寧に設定します。 .fillは残りのスペースを占有します。

例は、クロムとFirefoxの両方でうまく動作し、および2つの同一の画像が表示されている：

をエッジにおいてしかしながら、画像がトリミングされる：

IEのどこがより奇妙であるか：

あなたがここにSVGのソースを表示することができます：http://imgh.us/logo-light_1.svg

を私は私が実際だ1もすべて異なる結果とSVGのpreserveAspectRatio属性の異なる値のカップルを試みたが、まだいませんでした探している。

何か不足していますか？これはちょうど適切なpreserveAspectRatio属性の問題か、それともバグですか？

Answer 1

これまで説明したように、イメージコンテナの幅は固定されているため、IE11でこれを使用できます。

これが私の仕事：

.box { 
    flex: 0 1 461px; /* changed flex-basis from auto */ 
    background: red; 
} 

をそれはオプションではありません、とあなたは、単にPNGとSVGが一致する場合は、正z-index値は、表面に青色の背景をシフトします。

.box { 
    flex: 0 1 auto; 
    background: red; 
    z-index: 1;  /* new */ 
} 

フレックス項目（reference）に適用した場合z-indexがを配置する必要がないことに留意されたいです。

---

別の可能な解決策は、画像の（heightとは対照的に）、次いでwidthを画定する、可撓性容器内に画像を配置することになる。

.box { 
    flex: 0 1 auto; 
    background: red; 
    display: flex;  /* new */ 
} 

.box img { 
    /* display: block; */ 
    /* width: auto; */ 
    /* height: 150px; */ 
    background: blue; 
    width: 332px;  /* new; value can be anything, PNG and SVG will match */ 
}