引导 img 响应不适用于 Firefox 伪元素

Question

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

网页代码：

<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中取出。

Answer 1

你必须添加一个

标签max-width: 100%。也许在类选择器上或直接作为内联样式