Question

我有一个网格，我在其中显示图像。每个图像都应该适应细胞大小。

我正在使用此css自动调整图像：

img {
  max-width: 100%;
  max-height: 100%;
}

然后当我调整包含图像的div（单元格）时，图像应该适应div。它在Chrome / Firefox下正常运行。在Safari 5.1.7（Win 7）上，它在更改div的宽度时有效，但对高度不起作用。

我在这里创建了一个示例案例：http://jsfiddle.net/MNL29/7/

height按钮会增加div的高度，width按钮会更改宽度，而且图片不会在Safari下调整大小。

为什么会发生这种情况并且有解决方法（没有Javascript）？

Answer 1

新版

div {
  height: 100px;
  width: 200px;
  background: red;
  position: relative;
}

img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

似乎按预期工作。 Fiddle

Answer 2

在某些浏览器中{height：100％}表示100％来自父容器，其他浏览器将其解释为100％的窗口。像这样用jQuery做所有事情：

$("#1").click(function() { 
  var width = jQuery('div.A').width();
  var wWidth = jQuery(window).width();

  if (width+30 < wWidth) {
    $("div.A").css("width", "+=30px");
  } else {
    $("div.A").css("width", wWidth);
  }
});

$("#2").click(function() { 
  var height = jQuery('div.A').height();
  var wHeight = jQuery(window).height();

  if (height+30 < wHeight) {
    $("div.A").css("height", "+=30px");
  } else {
    $("div.A").css("height", wHeight);
  }
});

DEMO

Safari（Win7）不会使用max-height属性刷新img height

2 个答案: