在尝试使用多个版本的 jquery 解决这个问题一小时后,我放弃了。 我有一个导航菜单,中间有一个 Logo ,我需要 Logo 始终是一个圆圈。由于布局是响应式的,我根据为其生成的宽度设置 Logo 的高度。问题是,每当我更改视口(viewport)大小时, Logo 都会在高度上移动,我不知道如何维护它。
这是 JSFiddle
目前导航菜单中有 5 个按钮,因此每个按钮的宽度为 20%。 然后我像这样设置高度并偏移 Logo
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%。
问题是,只有当我切换到我的手机或全高清台式电脑并缩放到很小的宽度时,这种方法才有效,视口(viewport)变得非常薄和高,使 Logo 根本不居中。
如果您提供有关如何成功地将 Logo 居中(无论视口(viewport)的宽度或高度如何)的任何提示或建议,我将不胜感激。
我试图像 body{min-width:600px}
一样在 body 上强制最小宽度,我假设当我将窗口宽度更改为小于 600px 时它会停止缩放内容,但它什么也没做。如果有人能解释这一点,我也将不胜感激。
一如既往,期待您的回复。 谢谢。
最佳答案
这是一个非常简单的解决方案:不要使用从顶部开始的百分比来定位 Logo ,而是使用固定的百分比来定位它,并将您已经计算出的像素大小减半。这在你的 fiddle 中起作用:
$('#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'
});
关于javascript - 保持标志居中并保持比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27509639/