Question

我正在尝试创建一个浏览器窗口高度为10％的圆圈。如果我也将宽度设为10％，并且您缩放浏览器，则会得到一个畸形或压扁的圆圈。我想尝试用jquery创建圆的宽度，以便与高度成比例地改变。因此，如果10％转换为200px高度，宽度将更改为200px。我尝试了一些解决方案，但是继续获得0px的宽度。

Answer 1

假设您使用的是jQuery并且您的圈子是HTML元素，您可以这样做：

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

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

    var size = $window.height() * 0.1;
    $el.width(size).height(size);
});

Answer 2

获取窗口的宽度和高度，然后只需检查其中哪一个是最小的。获得该值的10％并将其用作圆的半径。

Answer 3

使用透明方形图像的小实验，它是<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%;

}

创建与窗口成比例的圆

3 个答案: