Question

我有一个带有最大高度和内部图像的div，它应该使用max-width：100％和max-height：100％。在chrome中，这可行，但firefox仅使用max-width并忽略max-heigth。

div#overlaycontent{
  position:relative;
  overflow:hidden;
  height:100%;
  overflow-y:auto; 
}

div#pic{
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
  float:right;
  width: -moz-calc(100% - 250px);
  width: -webkit-calc(100% - 250px);
  width: -o-calc(100% - 250px);
  width: calc(100% - 250px); 
  max-height:90%;
}

img#zoompic{
  max-width:100%;
  max-height:100%;
  display:block;
}

我如何实现firefox将同时使用？ max-width 和 max-height？

Answer 1

mozilla developer network描述的max-height百分比如下：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则百分比值将被视为无。

此说明还与height和百分比值一起使用。因此，如果要使用max-height属性，则必须将图像或父容器设置为特定的像素大小。也许如果您根据问题创建JSFiddle，我们可以向您展示没有max-height的其他解决方案。

EDIT // 现在使用给定的JSFiddle，这是一个工作示例http://jsfiddle.net/wd9rP/

firefox css max-width和max-height在max-height div中

1 个答案: