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

【问题标题】：Responsive images using flex layout in IE10在 IE10 中使用 flex 布局的响应式图像
【发布时间】：2015-05-07 12:59:11
【问题描述】：

我想使用 flex 布局将三个图像排列成一排，对齐，并在它们之间分配任何额外的空间。问题是，我希望图像能够响应。以下适用于 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 一个合适的小提琴。在 IE10 中是否可以使用带有响应式图像的 flex 布局？

【问题讨论】：

标签： css responsive-design flexbox

【解决方案1】：

我得到了这个工作。我的错误是没有将 flex 属性分配给包裹图像的

元素。相关Less：

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

【讨论】：