显示图像：flex；在 chrome 上显示错误，在 firefox 中工作

Question

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

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

Answer 1

如果图像是 flex 容器的直接子代，我会为图像和视频设置 flex: 0 0 auto;，因为您不希望它们增大或缩小（如果还没有设置，请设置图片 height 到 auto)

显示图像：flex；在 chrome 上显示错误，在 firefox 中工作

Images with display: flex; displaying wrong on chrome, work in firefox

html

css

cross-browser

flexbox

responsive-design