Question

您好我已经多次搜索论坛和谷歌 - 尝试了各种不同的东西，但我无法完成...

我试图让一个代码页面有一个固定的页眉和页脚，中间有一个居中的圆圈，可以动态改变大小，不会溢出到页眉或页脚中。

请看一下我的例子：

我很新，所以这一切，但坦率地说，我有点惊讶为什么

 document.getElementById('circle').style.height = document.getElementById ('circle').style.width;

似乎被忽略了。

Answer 1

这不会返回宽度

document.getElementById('circle').style.width

但这会（没有px）

document.getElementById('circle').offsetWidth

用此替换您的resize功能，它应该可以正常工作

function resize() {
  var circle = document.getElementById('circle');
      w = circle.offsetWidth;

  circle.style.height = w + 'px';
}

以下是JSFIDDLE的示例。

Answer 2

仅供记录：您是否考虑过使用真正的圆圈？您可以在html中嵌入 SVG 。定位的实际尺寸计算仍然存在。

<svg height="200" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <circle cx="80" cy="80" r="75" stroke="black" stroke-width="1" fill="green" />
    <text x="40" y="80" stroke="black">I am a circle!</text>
  </g>
</svg>

Answer 3

大家好，感谢您帮助@madalin ivascu和他的jquery解决方案。

我稍微调整了一下，以便我现在必须使用导航箭头和真正的响应式解决方案。如果有人有兴趣，请查看。

https://jsfiddle.net/sd34j5k6/

if($('.wrapper').height() > $('.wrapper').width()) 
{
    $('#circle').width($ ('.wrapper').width() *0.7);
    $('#circle').height($('.wrapper').width() *0.7 );
}else if( $('.wrapper').width()  >  $('.wrapper').height() )
{
    $('#circle').width($('.wrapper').height() *0.9);
    $('#circle').height($('.wrapper').height() *0.9 );
}

Answer 4

尝试：的CSS：

i++

JS：

#circle{
  position: absolute;
}

https://jsfiddle.net/uyt9z1qp/4/

div

4 个答案: