带显示的图像：flex；在 chrome 上显示错误，在 Firefox 中工作答案

【问题标题】：Images with display: flex; displaying wrong on chrome, work in firefox带显示的图像：flex；在 chrome 上显示错误，在 Firefox 中工作
【发布时间】：2018-05-28 15:09:54
【问题描述】：

我正在做一个网站.. 使用

display: flex;

问题是在 Chrome 中图片和视频被拉伸了，而在 Firefox 中它们完美..

我已经验证了我的 HTML 和 CSS，没有任何问题...

谁有我可以尝试的建议？

我已经尝试在图像和视频本身上放置 flex 并且我一直在使用

flex: 1 1 auto;

和

flex: 0 1 auto;

宽度试过了，高度没碰过

#section-campaign {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: -5;
    width: 100%;
}
   .campaign-thumbnails {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        width: 100%;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    .campaign-thumbnails img {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

 <section id="section-campaign">
        <div class="campaign-title">
            <h3>Choose campaign</h3>
        </div>
        <div class="campaign-thumbnails">
            <img id="campaign-img-q" onmouseout="qFilterOn()" onmouseover="qNoFilter()" onclick="qFilter()" class="thumbnail-campaign grey-campaign-img" src="images/city.jpeg"
                 alt="campaign 1">
            <img id="campaign-img" onmouseout="filterOn()" onmouseover="noFilter()" onclick="xFilter()" class="thumbnail-campaign grey-campaign-img" src="images/resort.jpeg"
                 alt="campaign 2">
            <img id="campaign-img-z" onmouseout="zFilterOn()" onmouseover="zNoFilter()" onclick="zFilter()" class="thumbnail-campaign grey-campaign-img" src="images/culture.jpeg"
                 alt="campaign 3">
        </div>
    </section>

在这里您可以看到 HTML 标记，以及与本节链接在一起的 CSS

【问题讨论】：

你试过 Ctrl+F5 吗，只是为了防止 chrome 被深度缓存（我经常不加载新更新的 CSS）？
是的，我已经做到了
添加供应商前缀
我认为可能是图片和视频，因为供应商前缀也不起作用
发布您的标记和 css 并在 jsfiddle.net 中进行演示，如果可以的话。有了给定的信息，我们只能猜测发生了什么。这听起来像一个简单的问题，如果你发布你的代码它已经解决了

标签： html css responsive-design flexbox cross-browser

【解决方案1】：

如果图像是 flex 容器的直接子级，我会为图像和视频设置 flex: 0 0 auto;，因为您不希望它们增长或缩小（如果尚未完成，请将图像设置为 height到auto)

【讨论】：