在 IE10 中使用 flex 布局的响应图像

Question

我想使用 flex 布局将三张图像排列成一行，对齐，并将任何额外的 space 分开。要注意的是，我希望图像能够响应。以下适用于 Chrome 但不适用于 IE10：

$('head style[type="text/css"]').attr('type', 'text/less');
less.env = 'development';
less.refreshStyles();

body {
    margin: 0;
}

.flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.flex-justify(@justifyStyle) {
    .ms-flex-justify(@justifyStyle);
    -webkit-justify-content: @justifyStyle;
    justify-content: @justifyStyle;
}
.ms-flex-justify(@msJustify) when (@msJustify = space-between) {
    -ms-flex-pack: justify;
}
.ms-flex-justify(@msJustify) when (@msJustify = space-around) {
    -ms-flex-pack: distribute;
}
.ms-flex-justify(@msJustify) when (@msJustify = flex-end) {
    -ms-flex-pack: end;
}
.ms-flex-justify(@msJustify) when (@msJustify = flex-start) {
    -ms-flex-pack: start;
}
.ms-flex-justify(@msJustify) when (@msJustify = center) {
    -ms-flex-pack: center;
}

#content {
    background-image: url(//dummyimage.com/900x300/ccf/f);
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    .flex();
    .flex-justify(space-between);
    & > div {
        & > img {
            height: auto;
            opacity: 0.5;
            vertical-align: bottom;
            width: 100%;
        }
    }
}

<div id="content">
    <div><img src="//dummyimage.com/300/99f/f" /></div>
    <div><img src="//dummyimage.com/300/99f/f" /></div>
    <div><img src="//dummyimage.com/300/99f/f" /></div>
</div>

Here's一个合适的fiddle。是否可以在 IE10 中使用带有响应式图像的 flex 布局？

Answer 1

我成功了。我的错误是没有将 flex 属性分配给包装图像的

元素。相关减去：

#content {
    background-image: url(//dummyimage.com/900x300/ccf/f);
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 100%;
    .flex();
    .flex-justify(space-between);
    & > div {
        flex: 0 1 300px;
        -ms-flex: 0 1 300px;
        & > img {
            height: auto;
            max-width: 100%;
            opacity: 0.5;
            vertical-align: bottom;
        }
    }
}

还有一个fiddle.

在 IE10 中使用 flex 布局的响应图像

Responsive images using flex layout in IE10

css

responsive-design

flexbox