Firefox 错误：图像不按比例缩小？答案

【问题标题】：Firefox bug: image does not scale down?Firefox 错误：图像不按比例缩小？
【发布时间】：2016-05-23 02:37:53
【问题描述】：

这是 Firefox 的错误吗？

CSS，

html, body {
    height: 100%;
    margin: 0;
    padding: 0 0;
    /*border: 4px solid black;*/
}

.container-fluid {
    height: 100%;
    width: 100%;
    display: table;
    padding-right: 0;
    padding-left: 0;
    /*border: 4px solid blue;*/
}

.row-fluid {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    background-color:#990000;
    /*border: 4px solid red;*/
}

.img-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.img-container img{
    max-width:100%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
}

HTML，

  <div class="container-fluid">
    <div class="row-fluid">
        <div class="img-container">
            <!-- <img src="http://placehold.it/400x450"> -->
            <img src="http://placehold.it/2000x450">
            <!-- <img src="http://placehold.it/400x480"> -->
        </div>
    </div>
</div>

铬，

大图将被缩小以适应我想要的屏幕宽度。

火狐，

图片未按比例缩小以适应屏幕。

有什么办法可以解决这个问题吗？

编辑：

@-moz-document url-prefix() {
    .img-container img {
        width: 100%;
        max-width: -moz-max-content;
    }
}

【问题讨论】：

您将在“img-container”中有多少张图片？
@Pangloss 每个“img-container”一张图片。
最终我会有一个“img-container”列表，用于制作引导轮播。

标签： html css firefox flexbox

【解决方案1】：

是的，Firefox 有问题。它不会保持纵横比。要使其正常工作，只需将width: 100%; 添加到图像即可解决问题。

.img-container img {
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

Working Fiddle

检查相同类型的问题here。

编辑：

要解决所有尺寸图像的问题，请使用max-width: -moz-max-content;

@-moz-document url-prefix() {

    .img-container img { width: 100%; max-width: -moz-max-content; }
}

Updated Fiddle

【讨论】：

谢谢，但它打破了<img src="http://placehold.it/400x450">。当图像很小时，我不希望它缩放...
感谢您的编辑。小图像仍然有一个小错误。请看我上面的编辑。
@teelou 如果您不想缩放图像，请为 mozilla 删除 width:100%
现在是高度有问题。

【解决方案2】：

根据错误报告（见下文），这是 Firefox 的一个已知问题。（虽然 IE11 也无法按需要缩放图像）。

这似乎解决了 Firefox 中的问题：

代替：

.img-container img {
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}

试试这个：

.img-container img {
    width: 100%;           /* adjusted */
    height: auto;          /* adjusted */
    margin-left: auto;
    margin-right: auto;
}

DEMO

另一种可能的解决方案是将table-layout: fixed 添加到主容器（.container-fluid）。此错误报告中详细介绍了此方法：

Bug 975632 - max-width: 100%; doesn't work inside tables or display: table

【讨论】：

谢谢，但它打破了<img src="http://placehold.it/400x450">。当图像很小时，我不希望它缩放...

【解决方案3】：

由于您已经在布局中使用 CSS 表格，因此我建议您使用这种不使用 flexbox 的方法。根据我的测试，它在 Chrome 和 Firefox 上运行良好。我在img 周围添加了一个div。

jsFiddle

body { margin:0; }

.img-container {
  display: table;
  table-layout: fixed; /*required for responsive width in Firefox*/
  width: 100%; /*required for fixed table layout*/
}
.img-container .image {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 100vh; /*required for responsive height*/
}
.img-container .image img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle; /*remove whitespace*/
}

<div class="img-container">
  <div class="image">
    <img src="http://placehold.it/400x300">
    <!-- <img src="http://placehold.it/2000x450"> -->
    <!-- <img src="http://placehold.it/400x480"> -->
  </div>
</div>

或者，您可以使用伪元素:before 或:after + 内联块进行垂直对齐。无需更改标记。

jsFiddle

body { margin:0; }

.img-container {
  width: 100vw; /*required for responsive width in Firefox*/
  height: 100vh;
  text-align: center;
  font-size: 0; /*remove whitespace*/
}
.img-container:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.img-container img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

<div class="img-container">
  <img src="http://placehold.it/400x300">
  <!-- <img src="http://placehold.it/2000x450"> -->
  <!-- <img src="http://placehold.it/400x480"> -->
</div>

【讨论】：