bootstrap img-responsive 不适用于 Firefox 伪元素答案

【问题标题】：bootstrap img-responsive is not working for firefox pseudo elementsbootstrap img-responsive 不适用于 Firefox 伪元素
【发布时间】：2018-04-29 18:36:02
【问题描述】：

我正在使用内容通过 CSS 加载我的图像，它们在 Chrome 和 Safari 上运行良好，但 Firefox 存在问题，迫使我使用伪元素。但是，伪元素不适用于 img-responsive 类。

HTML 代码：

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <a href="https://www.facebook.com/">
                <img class="img-responsive center-block" id="imgEN" />
            </a>
        </div>
    </div>
</div>

CSS 代码：

#imgEN::after  {
content:url("images/banner.png");
    text-align: -moz-center;
}

.img-responsive { 
width:100%;
}

如何使img 元素具有响应性？在较大的分辨率上看起来不错，但在较小的分辨率/屏幕上，图像将从div 中消失。

【问题讨论】：

标签： html css twitter-bootstrap firefox

【解决方案1】：

您必须将 max-width: 100% 添加到您的 a 标签。也许通过类选择器或直接作为内联样式

【讨论】：