html - 使用显示表调整元素大小

Question

在下面的 [网站][1] 上，我有一个横幅部分，我告诉它要显示为带有表格单元格的显示表格。我使用它是因为我需要将图像与横幅的中间对齐。

HTML:

<div class="banner banner-large">
    <div class="banner-inner">
        <div class="banner-col col-page-intro">
            <h1>Collect. <br>Transport. <br>Recycle.</h1>       
        </div>
        <div class="banner-col col-banner-image">
                <img src="/files/1813/9705/0946/gd-hero.png" alt="">
        </div>  
    </div>
</div>

SCSS:

 .banner {
        background:$red;
        color:$white;
        position:relative;
        overflow: hidden;
}

    .banner-inner {
        display:table;
        width:100%;
        height:100%;

        @include bp(XS) {
            display:block;
        }
    }
    .banner-col {
        display:table-cell;

        width:50%;

        @include bp(XS) {
            display:block;
            width:100%;
        }
    }

    .col-page-intro {
        padding:40px 0 40px 60px;
        vertical-align: top;

        @include bp(L) {
            padding:20px 0 20px 30px;
        }
        @include bp(XS) {
            width:100%;
            padding:20px 15px;
        }
    }

    .col-banner-image {
        text-align:center;
        padding: 0 30px;
        vertical-align: middle;

        @include bp(XS) {
            text-align:left;
            margin-bottom:20px;
            padding:0 10px;
        }
    }

如果您在 chrome 和 firefox 中[比较网站][2]，您会注意到 chrome 支持图像的宽度和大小调整(最大宽度 100%)，而 firefox 则不然。

我该怎么做才能使这两种浏览器的行为都像 Chrome 当前那样？

编辑:这只适用于 chrome。

Answer 1

只需添加 width: 100%; 和可能的 display: block; 到你的 img:

.col-banner-image img {
    display: block;
    width: 100%;
}