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%;
}

使用显示表调整元素大小

1 个答案: