2

サイズ変更可能な 内に流動的な画像を収めようとしていDIVます。画像は縦横比を維持し、100% (幅と高さの両方) を超えないようにする必要がありDIVます。

また、画像は水平方向と垂直方向の両方で中央に配置する必要があります。Chrome と Safari はこれを完全に行いますが、Internet Explorer 10 はそうではありません。

問題を説明するために簡単なjsfiddleを設定しました。

HTML:

<div id="diver">
    <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
</div>

そしてCSS：

#diver {
    border:1px solid #000000;
    width:200px;
    height:200px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

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

Chrome でボックスのサイズを幅と高さの 100% 未満に変更すると、次の画像のような結果が得られます。

100% 未満の高さ:

高さ 100% 未満

100% 未満の幅:

100% 未満の幅

ただし、Internet Explorer 10 は高さのみをスケーリングします。幅が 100% を下回ることはありません。これが主な問題です。

Chrome/Safari と同様に IE で幅をスケーリングできますが、DIV高さ (はい、高さ) を 10px などの低い値に設定する必要があります。

javascript で画像を動的にスケーリングできることは知っていますが、Internet Explorer がスケーリングを正しく処理できるはずの場合、余分な javascript が必要になるとは思いません。

4

2 に答える 2

2

表のセルとサイズの制約

この問題は、IE、Firefox、および Opera で発生します。とdisplay: table-cellを併用したことが原因です。この場合、表のセルは、 を持つ要素とは異なる動作をします。max-width: 100%max-height: 100%display: block

サイズ変更可能なコンテナとは関係ありません。また、コンテンツの整列とは何の関係もありません (ただし、それがおそらく を使用する動機ですdisplay: table-cell)。根底にある問題を再現できる最も単純な状態にコードを縮小するために、当面は両方を方程式から削除できます。

簡易デモ

簡略化されたデモには、span背景が青色の画像のペアとタグのペアがあります。各ペアで、最初のものは を使用display: blockし、2 番目のものは を使用しdisplay: table-cellます。CSS の残りの部分は同じです。

それぞれについて、CSS が成功すると、画像の幅と高さspanが 100px に縮小されます。そうでない場合、幅または高さは 200px のままです。

画像

  • を使用するdisplay: blockと、すべてのブラウザで正常に動作します。
  • を使用する場合display: table-cell、Chrome と Safari (Webkit ブラウザー) は正常に動作しますが、IE、Firefox、および Opera は画像の幅を縮小できません。

スパンタグ

  • を使用するdisplay: blockと、すべてのブラウザで正常に動作します。
  • を使用するdisplay: table-cellと、Chrome と Safari は幅と高さを縮小できませんが、IE、Firefox、Opera は幅を縮小できません。

画像の場合、動作は質問に追加された元のデモをテストした結果と一致しています。

これは元のデモの更新版で、画像を背景が青色のスパンに置き換えています。これにより、Chrome と Safari にも根本的な問題がどのように存在するかがもう少し明確に示される可能性があります。デモを使用するように変更するdisplay: blockと、コンテンツのサイズ変更はすべてのブラウザーで正常に機能します (配置は失われます)。

jQuery

テーブル セル内の画像を正しくサイズ変更する方法が見つからない限り、このような単純化されたケースでは、元のデモでこれを解決するには、追加の jQuery を追加するか、フレックスボックスやグリッドなどのより高度な CSS3 機能を試す必要があります。 .

追加の jQuery が必要な場合は、画像の位置合わせにdisplay: block使用したり (コンテナーに使用できるようにする)、画像のサイズ変更に使用したりできます (max-width: 100%およびの使用を削除して、使用できるようにmax-height: 100%します)。display: table-cell整列のため）。

いずれの場合も、jQuery UI Resizableには、これに使用できるresize イベントがあります。

于 2013-05-06T16:44:05.647 に答える