Question

经过一个小时的尝试用多个版本的jquery来解决这个问题后，我放弃了。我有一个导航菜单，中间有一个徽标我需要徽标永远是一个圆圈。由于布局是响应式的，我根据为其生成的宽度设置徽标的高度。问题在于，每当我更改视口大小时，徽标都会移动到高度不明确的地方，我不知道如何维护它。

这里是JSFiddle

Fiddle result here

目前导航菜单中有5个按钮，因此每个按钮的宽度为20％。然后我设置高度并设置这样的标志

function scaleLogo(){

    var ww = $(window).width();
    if (ww < 300) {
      var cr = 0.05;
    }
    else {
      var cr = 0.30;
    }  

    var cw = $('#home_btn').width();
    $('#home_btn').css({
        'height': cw + 'px', 
        'top': '-' + cr * cw + 'px'
    });
}

因此'height': cw + 'px'将高度设置为宽度的大小，'top': '-' + cr * cw + 'px'将top属性设置为减去cr（圆圈比率）乘以cw（圆圈重量），从而将其定位为-10当屏幕宽度小于400px时的宽度百分比，或者当超过400px时宽度的-30％。

问题在于，当我切换到手机或全高清桌面电脑并扩展到很小的宽度时，这种情况才有效，视口变得非常薄而且很高，使得徽标根本不居中。

我非常感谢有关如何成功居中徽标的任何提示或建议，无论视口的宽度或高度如何。

我试图在身体上强制最小宽度，如body{min-width:600px}，我认为当我将窗口宽度改为小于600px时，它会停止缩放内容，但它没有做任何事情。如果有人能够解释这一点，我也会感激。

一如既往，期待您的回复。谢谢。

Answer 1

这是一个非常简单的解决方案：不是使用顶部的百分比来定位您的徽标，而是使用固定的百分比定位它，并将您已计算的像素大小减半。这适用于你的小提琴：

 $('#home_btn').css({
    'height': cw + 'px',
    // steadily position it in the middle
    'top': '50%',
    // then reduce its top margin with half its height
    'margin-top' : -(cw/2) + 'px'
 });

Answer 2

使用CSS定位徽标的基本想法，而不用担心定位图像

$(window).on("resize", function() {
    var winWidth = $(this).width();
    var logoSize = Math.ceil(winWidth / 4);
    $(".logo").width(logoSize).height(logoSize);
});

.logo {
    background-repeat: no-repeat;
    background-image: url(http://s.cdpn.io/3/kiwi.svg);
    background-position: 50% 50%;
    background-size: 50%;
    height: 200px;
    width: 200px;
    background-color: rgb(211,211,211);
    border-radius:50%;
    box-shadow: 0px 5px rgba(0,0,0,0.3);
}

<div class="logo"></div>

JSFiddle上的相同代码：http://jsfiddle.net/0rLwh4w3/您可以在其中实际调整浏览器的大小

将徽标保持在中心并保持比例

2 个答案: