2

CSS レイアウトに問題があります。重要な点は、幅が狭くなるにつれてボックスの高さが大きくなるようにしたいということです。

ここで、要素の「固定アスペクト比」手法から始めました。高さを 0 に設定し、上部のパディングをパーセンテージ、たとえば 50% に設定します。パディング値は親要素の幅の 50% として計算されます (高さではありません)。 .

次のステップ (私の中途半端なソリューション) は、パディングのパーセンテージを変更して、幅が減少するにつれて増加するようにすることです (幅はページの 100% です)。これは単純な CSS では発生しないと確信しており、ウィンドウのサイズが変更されたときに値を更新する小さな Javascript に満足しています。

そのパーセンテージを幅に逆に調整する式を誰かが手伝ってくれますか?

その他の注意事項:

  • 要素は「スペーサー」です - 見えなくなるので、2 つの要素などを取っても問題ありません。
  • レイアウト全体は流動的で、幅 2500 ピクセル以上から 320 ピクセルまでレスポンシブであるため、使用できる「最大値」はありません (私は思いません)。

前もって感謝します。

4

1 に答える 1

2

おそらく、jQuery .resize() 関数が役立つでしょうか? 要素（またはウィンドウ）のサイズが変更されるたびに関数をバインドします。

たとえば、要素の面積#elを常に 50,000 ピクセル四方にしたい場合

$(window).resize(function() {
    area = 50000;
    width = $('#el').width();
    $('#el').height(Math.ceil(area/width));
    });

作業例: http://jsfiddle.net/asifrc/T8HrW/embedded/result/

コード例: http://jsfiddle.net/asifrc/T8HrW/

jQuery .resize() ドキュメント: http://api.jquery.com/resize/

これがあなたが探していたものかどうか教えてください:)

于 2013-04-10T06:43:09.363 に答える