Question

我正在尝试在左侧设置一个带徽标的页面，在右侧（底部）设置一个响应式图像。

事情似乎对Safari有所回应，但对Firefox没有反应。我环顾四周并添加以下认为它会对Firefox有所帮助，但似乎并非如此:(

@-moz-document url-prefix() {
    .mic img {
        width: 100% !important;
    }
}

我正在尝试让右侧图像在高度上自动调整大小，同时保持其比例。谁能告诉我这是什么问题？

谢谢！

Answer 1

您正在使用常规规则覆盖-moz文档。

反转顺序以获得正确的效果 https://jsfiddle.net/w2ebvkr7/3/

.mic img {
    max-height:100%; 
    width:auto !important;
}

@-moz-document url-prefix() {
    .mic img {
        width: 100% !important;
    }
}

Answer 2

请尝试使用box-sizing：border-box，如：

＆＃13;

@-moz-document url-prefix() {
    .mic img {
        width: 100% !important;
        box-sizing: border-box;
    }
}

＆＃13;