0

ブラウザ ウィンドウの 10% の高さの円を作成しようとしています。幅も 10% にして、ブラウザを拡大縮小すると、円の形が崩れたり、つぶれたりします。高さに比例して円の幅をjqueryで作成してみたいと思います。したがって、10% が 200px の高さに変換される場合、幅は 200px に変更されます。いくつかの解決策を試しましたが、代わりに幅が 0px になり続けます。

4

3 に答える 3

0

の直接の子である透明な正方形の画像を使用した小さな実験<body>:

http://jsfiddle.net/2S3xU/3/

<html><body><img src="transparent-square.gif">

img {
    border-radius: 99999px;
    position: absolute;
    top: 0; left: 0;
    height:     100%; /* width will follow height to keep image undistorted*/
    max-width:  100%;
    max-height: 10%;
}​

/* Opera fix*/
body, html {
    width: 100%;
    height: 100%;

}
于 2012-10-22T08:48:31.823 に答える
0

jQuery を使用していて、円が HTML 要素であると仮定すると、次のようにすることができます。

var $window = $(window),
    $el = $('#someElement');

$window.on('resize', function () {

    var size = $window.height() * 0.1;
    $el.width(size).height(size);
});
于 2012-10-22T08:13:08.790 に答える
0

ウィンドウの幅と高さを取得し、どれが最小かを確認します。その値の 10% を取得し、これを円の半径として使用します。

于 2012-10-22T08:13:27.917 に答える