保持标志居中且保持比例

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'将顶部属性设置为负的cr（圆形比率）乘以cw（圆形重量），这导致在屏幕宽度小于400px时将其定位在宽度的-10％处，而在大于400px时定位在宽度的-30％处。

问题在于，当我切换到手机或全高清桌面电脑并缩小宽度时，视口变得非常狭窄和高，使得徽标无法居中。

我非常感谢任何有关如何成功居中徽标的提示或建议。

我试图强制在body上设置min-width，例如body{min-width:600px}，我假设当我将窗口宽度更改为小于600px时，它将停止缩放内容，但它没有做任何事情。如果有人能解释一下，我会很感激。

像往常一样，期待您的回复。 谢谢。

- Cream Whipped Airplane

---

现代浏览器 - 使用background-size和background-position设置背景图片。 - epascarello

好的，那我会试着调整一下。等我有些结果后再回来。谢谢。等一下，不用了，因为按钮的位置还是会错。我对图像没有问题，只是对圆形按钮有问题。 - Cream Whipped Airplane

并且/或者使用像vw这样的单位来在CSS中解决它。 - GolezTrol

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

- somethinghere

---

哦哇。今天之后，我开始认为我有这样一个问题，即我用非常复杂的解决方案来处理所有事情 :'(。谢谢。您知道我如何设置最小宽度吗？ - Cream Whipped Airplane

当你谈论页面的min-width时，最好使用一个容器div并给它一个min-width，因为body会出现问题...如果在其上设置min-width不起作用，那么我不确定为什么。然而，没有设备查看小于200px的页面，所以我不会真的担心，因为这适用于非常小的尺寸。但是，您可以声明rem中的font-size，然后根据视口宽度修改您的font-size... - somethinghere

我刚刚意识到了一件事。这个方法在你点击圆形时会把它移出原来的位置。我想现在我必须使用 jQuery 来设置 : active 的边距了??请查看此处 http://jsfiddle.net/ehxptLft/57/，本应将圆圈向下移动 3 像素并减少阴影数量以创建按下效果。 - Cream Whipped Airplane

但是，是否存在 jQuery 等效于 CSS 的 :active 伪类选择器？ - Cream Whipped Airplane

通过在您提供的代码下面添加以下代码来解决它 :) 可能不是最好的解决方案 tho $('#activeStyle').remove(); $('head').append('<style type="text/css" id="activeStyle">#home_btn:active {margin: -'+ (cw/2-3) + 'px 0 0 !important;background: rgb(221, 221, 221);-webkit-box-shadow: 0 1px 0 0 rgb(119, 119, 119), 0 2px 0 0 rgb(119, 119, 119), 0 3px 0 0 rgb(119, 119, 119), inset -5px 0 5px -5px rgba(0,0,0,0.91), inset 10px 0 10px -10px rgba(0,0,0,0.91), 0 6px 3px 0 rgba(0, 0, 0, 0.81);}</style>'); - Cream Whipped Airplane

嗯...我想jQuery的等效语句是`is("active")"。不过你的解决方案有点不太好，尽量不要在这种情况下使用active。我真的看不出来active的意义所在。只要不在active中定义margin等属性，你应该就没问题了。 - somethinghere

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/，您可以实际调整浏览器大小

- epascarello

---

这是一个不错的方法，但似乎并没有解决居中问题，只是另一种显示方式。不过CSS做得很好。 - somethinghere

认为问题出在图像上，而不是实际的圆形，这也可以通过CSS修复。 - epascarello