Keep the logo centered and maintain the ratio
After one hour of trying to figure this out with multiple versions of jquery, I give up. I have a navigation menu that has a logo in the center. I need a logo to always be around. Since the layout is responsive, I set the height of the logo based on the width I created for it. The problem is that whenever I resize the viewport, the logo moves into place in height and I have no idea how to maintain it.
Here's the JSFiddle
The result of the script is here
There are currently 5 buttons in the navigation menu, so each button is 20% wide. Then I set the height and set the logo this way
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'
});
}
So it 'height': cw + 'px'
sets the height in the size of the width, and 'top': '-' + cr * cw + 'px'
sets the top attribute minus cr (circular ratio) times cw (circular weight), which causes it to be positioned either -10% of the width when the screen width is less than 400px or -30% of the width. if above 400px.
The problem is that this is the only kind of work, when I switch to my phone or full hd desktop and zoom to a small width, the viewport gets very thin and tall, making the logo not centered at all.
I would greatly appreciate any advice or advice on how to successfully center the logo regardless of the width or height of the viewport.
I was trying to impose a minimum width on the body like body{min-width:600px}
and I assumed that when I changed the width of the window to less than 600px it stopped scaling the content but did nothing. If anyone could explain this, I would appreciate it.
As always, I look forward to hearing from you. Thank.
source to share
This is a very simple solution: instead of placing your logo using percentages on top, place it with a fixed percent and shrink it by half the pixel size you have already calculated. This worked in your 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'
});
source to share
Basic idea with logo positioning with CSS and don't worry about image positioning
$(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>
Same code on JSFiddle: http://jsfiddle.net/0rLwh4w3/ where you can actually resize your browser
source to share