0

我正在尝试创建一个高度为浏览器窗口 10% 的圆圈。如果我也将宽度设为 10%，然后缩放浏览器，则会得到一个畸形或压扁的圆圈。我想尝试用 jquery 创建圆的宽度，以与高度成比例地变化。因此，如果 10% 转换为 200px 高度，则宽度将更改为 200px。我已经尝试了一些解决方案，但作为回报，我不断得到 0px 的宽度。

4

3 回答 3

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 回答
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 回答