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

Keep logo in the center and maintain ratio

本文关键字：在中心      更新时间：2023-09-26

经过一个小时的尝试，我放弃了。我有一个导航菜单，中间有一个徽标，我需要徽标始终是一个圆圈。由于布局是响应式的，我根据为其生成的宽度设置徽标的高度。问题是，每当我更改视口大小时，徽标都会移动到高度的位置，我不知道如何维护它。

这是 JSFiddle

小提琴结果在这里

目前导航菜单中有 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(圆粗细(，这导致当屏幕宽度小于 400px 时将其定位为宽度的 -10%，当超过 400px 时将其定位为宽度的 -30%。

问题是，只有当我切换到手机或全高清台式电脑并缩放到很小的宽度时，这种方式才有效，视口变得非常薄和高，使徽标根本不居中。

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

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

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

这是一个非常简单的解决方案：不要使用顶部的百分比来定位徽标，而是使用固定的百分比放置徽标，并将已经计算的像素大小减少一半。这在你的小提琴中起作用：

 $('#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'
 });

使用 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/您可以实际调整浏览器大小的地方

相关文章：