3

幅がコンテナの幅のパーセンテージである div があります。私の質問は、コンテナーが正方形ではない場合に、高さが幅と同じピクセル長であることを確認するにはどうすればよいかということです (したがって、単に高さのパーセンテージを幅と同じに設定することはできません)。offsetWidthまた、JavaScriptで 、clientWidth、またはその他のそのようなプロパティを使用する必要がなく、純粋な CSS ソリューションを使用することを好みます。

例：

<div style="width:45%;background-color:blue">My Content!</div>

ありがとう。

4

3 に答える 3

2

これは純粋な CSS では不可能です。

よろしければ、jQueryソリューションを提供させてください。

var $elem = ​$('div');
$(window).resize(function () {
    $elem.height($elem.width());
}).resize();

これにより、ウィンドウのサイズが変更されても、高さが幅と同じに保たれます。デモで試すことができます (サイズを変更してみてください)。

jQuery を使用したのは、ブラウザーが要素の幅と高さを処理する方法に大いに役立つからです。

于 2012-04-06T17:18:15.280 に答える
0

これは純粋な CSS では不可能です。ほんの少しの Javascript を使用すると、突然非常に簡単になります。

$("#mydiv").css("height", $("#mydiv").css("width"));​
于 2012-04-06T17:18:39.520 に答える