0

画像を表示するグリッドがあります。各画像は、セル サイズに適応することになっています。

このCSSを使用して、画像を自動的に適応させています:

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

次に、画像を含む div (セル) のサイズを変更すると、画像が div に適応するはずです。Chrome/Firefox で正常に動作します。Safari 5.1.7 (Win 7) では、div の width を変更すると機能しますが、 heightでは機能しません。

ここにサンプルケースを作成しました：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 に答える