How to make logo stay centered and shrink to fit as browser resized

Question

Trying here: http://alternativegrow.com.au/

to make logo stay centered and shrink to fit as browser resized (instead of getting cut off). I have followed a number of recommended techniques but to no avail...

I am a little unsure which elements I've added or modified are helping or hindering.

What I've added, via custom css plug in for now:

    .header-image .site-title > a {
    float: left;
    max-width: 100%;
    height: auto;
    background-size: 100% auto !important;
    background-position:center; 
}

    .title-area {
    float: left;
    padding: 10px 0;
}

.site-header .wrap {
  padding: 10px 0;
}

What is in stylesheet:

/* ## Title Area
--------------------------------------------- */

.title-area {
    float: left;
    padding: 10px 0 10px 15px;
    width: 360px;
}

.header-full-width .title-area {
    width: 100%;
}

.site-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.site-title a,
.site-title a:hover {
    color: #fff;
}

 .header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 160px;
    width: 350px;
} 

.site-description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

.site-description,
.site-title {
    margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
    display: block;
    text-indent: -9999px;
}

.site-description {
    color: #fff;

edit - Oh I did try media queries but they also did not work. Specifically I tried adjusting the min-height at different beak points, with width set as auto, expecting the width to adjust relative to the height setting, but in fact the logo just disappeared when I did this. I do not really want to use multiple sized logos for various break points as this seems clunky to me, however it is better than what is here, but this also did not work for me.

Answer 1

Not sure to understand whether the example you point to is what you try to achieve or what you try to modify.

Maybe this example can help you

The important parts are:

1) to make the element which holds the logo as background take all the space available

2) set the background-size at 'contain'

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

.logo{
  background:url('http://www.vectortemplates.com/raster/batman-logo-big.gif') no-repeat center;
  width: 100%;
  height: 100%;
  background-size:contain;
}

header{
 height:200px;
}