For optimal image resizing, consider implementing max-width: 100%; height: auto; in your CSS code.

If you want to handle it easily, one way is to directly insert the logo image into your content instead of using it as a background image. This allows you to style the img element using CSS;

HTML

<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

CSS

#logo-container img {
   width: 100%;
   height: auto;
}

One way to implement responsive design in CSS is by utilizing media queries:

 /* Adjust Background for Smaller Screens */
@media only screen and (max-width: 800px) {

    #header {
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}

Focus on styling the image itself, rather than the link it's in.

.logo-wrapper img {
width: 100%;
height:auto;
}

Consider using percentages instead of pixels for better image scaling based on page size.

You can update your HTML code to something like this:

<img src="logo.png" width="80%" height="80%"/>

By doing so, the image will scale with the screen width while maintaining aspect ratio by adjusting the height accordingly.

Just a heads up, I tested the website on my Android phone and it looks good even when zoomed out completely.

Experiment with this solution:

#header img {
   width: 100%; !important
   height: auto; !important
}

This will replace the existing settings.

How can an image be zoomed on hover?

Take a look at this example HTML:

<footer>
              <!-- Main Footer -->
              <section class="section background-dark">
                  <div class="line">
                      <div class="margin">
                          <!-- Column 1 -->
                          <div class="s-12 m-12 l-4 margin-m-bottom-2x">
                              <h4 class="text-uppercase text-strong">Our Philosophy</h4>
                              <p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>

                                  <div class="line">
                                      <h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
                                      <div class="margin">
                                          <div class="s-12 m-12 l-4 margin-m-bottom">
                                              <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                                          </div>
                                          <div class="s-12 m-12 l-8 margin-m-bottom">
                                               <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                                               <a class="text-more-info text-primary-hover" href="/">Read more</a>
                                         </div>
                                    </div>
                                </div>
                         </div>

                  <!-- Column 2 -->
                     <div class="s-12 m-12 l-4 margin-m-bottom-2x">
                      <h4 class="text-uppercase text-strong">Contact Us</h4>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-placepin text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><b>Adress:</b> Responsive Street 7, London, UK</p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-mail text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><a href="/" class="text-primary-hover"><b>E-mail:</b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c5c9c8d2c7c5d2e6d5c7cbd6cac3c2c9cbc7cfc888c5c9cb">[email protected]</a></a></p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-smartphone text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><b>Phone:</b> 0700 000 987</p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-twitter text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11 margin-bottom-10">
                              <p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
                          </div>
                      </div>
                      <div class="line">
                          <div class="s-1 m-1 l-1 text-center">
                              <i class="icon-facebook text-primary text-size-12"></i>
                          </div>
                          <div class="s-11 m-11 l-11">
                              <p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
                          </div>
                      </div>
                  </div>

                  <!-- Column 3 -->
                       <div class="s-12 m-12 l-4">
                      <h4 class="text-uppercase text-strong">Leave a Message</h4>
                      <form class="customform text-white">
                          <div class="line">
                              <div class="margin">
                                  <div class="s-12 m-12 l-6">
                                      <input name="email" class="required email border-radius" placeholder="Your e-mail..." title="Your email address" type="text" />
                                  </div>
                                  <div class="s-12 m-12 l-6">
                                      <input name="name" class="name border-radius" placeholder="Your name..." title="Your name" type="text" />
                                  </div>
                              </div>
                          </div>
                          <div class="s-12">
                              <textarea name="message" class="required message border-radius" placeholder="Your message here..." rows="3"></textarea>
                          </div>
                          <div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit</button></div>
                      </form>
                  </div>
                 </div>
                </div>
              </section>
              <hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">

              <!-- Bottom Footer -->
              <section class="padding background-dark">
                  <div class="line">
                      <div class="s-12 l-6">
                          <p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
                          <p class="text-size-12">All images have been purchased from Bigstock. Do not use the images on your website.</p>
                      </div>
                      <div class="s-12 l-6">
                          <a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and development by Responsee Team</a>
                      </div>
                  </div>
              </section>
          </footer> 

Here is a snippet of the CSS:

a, a:link, a:visited, a:hover, a:active {
    color: #777;
}
.text-primary, .text-primary *, .primary-color-primary .text-primary, .primary-color-primary .text-primary * {
    color: #49BF4C !important;
}

... (remaining CSS rules omitted for brevity) ...

.image-hover-zoom:hover img {
    transform: scale(1.1);
}

Have you included the viewport meta tag in your header section?

<meta name="viewport" content="width=device-width, initial-scale=1.0">