除非容器具有固定宽度

Question

Edge和Internet Explorer 11似乎缩放 SVG图像与常规光栅图像不同。

看看下面的例子：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

两个图像完全相同，第一个是PNG，另一个是SVG。这两个图片都位于.box，其设置为flex-shrink但不是flex-grow。该框旁边是.fill，其设置为flex-grow，但不是flex-shrink。

所以，这个想法非常简单。我们将每个图像的高度设置为某个固定值，自动计算宽度，保持图像的纵横比，这样可以设置.box容器的宽度。 .fill占据了剩余的可用空间。

该示例在Chrome和Firefox中都运行良好，并且正在显示两个相同的图像：

在Edge中，图像被裁剪：

在IE中，甚至更奇怪：

您可以在此处查看SVG的来源：http://imgh.us/logo-light_1.svg

我还为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 不需要定位。

另一种可能的解决方案是将图像放在flex容器中，然后定义图像的width（而不是height）：

.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 */
}