0

我有一个显示图像的网格。每个图像都应该适应单元格大小。

我正在使用这个 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）？

4

2 回答 2

2

新版本

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

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

似乎按预期工作。小提琴

于 2013-01-17T13:56:26.557 回答
1

在某些浏览器中 {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);
  }
});

演示

于 2013-01-17T13:15:40.460 回答