Javascript 创建与窗口大小成比例的圆_Javascript_Jquery_Html_Css

Javascript 创建与窗口大小成比例的圆

javascript jquery html css

Javascript 创建与窗口大小成比例的圆,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在浏览器窗口中创建一个高度为10%的圆。如果我也将宽度设为10%，然后你缩放浏览器，就会得到一个变形或挤压的圆圈。我想尝试使用jquery创建圆的宽度，使其与高度成比例变化。因此，如果10%转换为200px高度，则宽度将更改为200px。我尝试了一些解决方案，但得到的回报是0px的宽度。假设您使用的是jQuery，并且您的圆圈是一个HTML元素，您可以这样做： var $window = $(window), $el = $('#someElement'); $window.on

我试图在浏览器窗口中创建一个高度为10%的圆。如果我也将宽度设为10%，然后你缩放浏览器，就会得到一个变形或挤压的圆圈。我想尝试使用jquery创建圆的宽度，使其与高度成比例变化。因此，如果10%转换为200px高度，则宽度将更改为200px。我尝试了一些解决方案，但得到的回报是0px的宽度。

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

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

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

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

获取窗口的宽度和高度，然后简单地检查其中哪一个最小。获取该值的10%，并将其用作圆的半径。

使用透明方形图像进行小实验，该图像是

的直接子对象：


img{
边界半径：99999像素；
位置：绝对位置；
顶部：0；左侧：0；
高度：100%；/*宽度将跟随高度，以保持图像不失真*/
最大宽度：100%；
最大高度：10%；
}
/*歌剧修复*/
正文，html{
宽度：100%；
身高：100%；
}

您可以发布一个包含您尝试的解决方案的JSFIDLE吗？编辑：下面是我尝试实现的一个FIDLE。问题是，如果缩放窗口，无论加载的宽度是多少，宽度方面都会被卡住，它不会根据不断变化的页面大小进行调整。

<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%;

}