Question

这个问题是我之前提出的问题的后续问题（不确定是否允许） - ＆gt; dynamic css circle inside div

该线程的解决方案不是我想要实现的，因为我需要与居中圆相邻的div独立于它，以便不受不透明度等样式的影响我想要应用于圆圈

我想创建的是一个页面，其中我有一个固定的页眉和页脚以及内容区域中的圆圈，根据可用空间动态改变大小 - 我不想让用户滚动。

上面提到的圆圈在两侧都有一个div（导航部分），也会改变大小。

当包装器的x轴大于y轴（宽度＆gt;高度）时，我到目前为止的代码似乎按预期工作但是由于某种原因，当包装器的高度大于宽度时，它变得一团糟。

https://jsfiddle.net/h1xfqwh6/

在小提琴中查看它实际上看起来有点不错 - 除了隐藏的颜色 - 这是一个功能......但如果我在firefox响应式设计开发人员模式中看，圆圈总是占用比包装器时更多的空间容器高度大于宽度 -

oversized circle

HTML

    <div class="wrapper">
        <div id="left"><i class="fa fa-arrow-left"></i></div>
            <div id="circle">
                    <p> Make me into a real circle </p>
             </div>
        <div id="right"><i class="fa fa-arrow-right"></i></div>
     </div>

CSS

 .wrapper {
 top: 4em;
 bottom: 4em; 
 left: 50%;
 margin-right: -50%;
 transform: translate(-50%);
 position: absolute;
 max-height: 100%;
background-color: blue;
 margin: 0 auto;
 padding-top: 1em;
 padding-bottom: 1em;
}



#left{
background:#00ffff;
height: 100%;
border: 1px black solid;
display: inline-block;
}

#right{
background:#00ff03;
display: inline-block;
height: 100%;
float: right;
text-align: right;
border: 1px black solid;

}

#circle {
 position: absolute;
 top: 50%;
 left: 50%;
transform: translate(-50%, -50%);
 display: inline-block;
 min-width: 5em;
height: 100%;
border-radius: 50%;
 width: 50%; 
 background-color: green;
 background-image: url('http://i.stack.imgur.com/MlIL8.png');
  background-repeat: no-repeat;
 background-size: 100%;
 border: black 2px solid; 
 }

jquery的

function f() 
{


if($('.wrapper').height() > $('.wrapper').width()) 
{
    $('#circle').height($('.wrapper').width() - $('#left').width() - $('#right').width());      
    $('#circle').width($ ('.wrapper').height() - $('#left').width() - $('#right').width());
    $('.wrapper').width($('#circle').width() + $('#left').width() + $('#right').width()); 


}
else if( $('.wrapper').width()  >  $('.wrapper').height() )
{
    $('.wrapper').width($('#circle').width() + $('#left').width() + $('#right').width());
    $('#circle').width($('.wrapper').height() );
    $('#circle').height($('.wrapper').height() );

}
$('#circle').height($('#circle').width());

}
f();
$(window).on('resize', function() {
f();
});

动态css圈导航

0 个答案: