Logo image must adjust to height of header - css

Question

Asking for advice: What would be the best way of making my website's (square) logo appear on or to the left of a fluid header?
My header takes up 100% of the width, but resizes in height depending on the viewport size. So I can't simply float the logo to the left of the contents, because then the image doesn't have the right height (and width, because it's square).
I tried setting the picture as background-image to the header, using:
background-position: left;
background-repeat: no-repeat;
background-size: contain;
But the problem then is that it needs different paddings-left at different screen/viewport sizes.
Then tried putting display: table on the header and display: table-cell on the logo and header contents div, but then the header contents resize to the height of the logo rather than the other way around because the logo is the biggest element in line.
Here's the HTML (simplified):
<header>
<div class="header-contents">
<h1>Site title</h1>
<nav>
</div>
</header>
What should I do?

Answer 1

EDIT / COMPLETELY DIFFERENT SOLUTION:
Style it as a CSS table, put the img in a DIV that's the left table-cell, give that a percentage width and auto height:
(Here in a codepen: http://codepen.io/anon/pen/XXNyBe)
<div id="header">
<div id="logo">
<img src="http://placehold.it/300x300/fa0">
</div>
<div id="restofheader">
<h1>My Headline</h1>
</div>
</div>
#header {
background: green;
display: table;
width: 100%;
}
#logo {
display: table-cell;
line-height: 0;
width: 20%;
}
#logo img {
width: 100%;
height: auto;
}
#restofheader {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 30px;
}
Addition, 2 Screenshots where this is applied to your site (with 20% logo width = header height - could be smaller or larger):
Large screen:
small screen:

Answer 2

.header-contents {
background-image: url(yourimage);
background-position: left center;
background-size: auto 100%;
background-repeat: no-repeat;
}
if it is not the answer your looking for, please provide a fiddle and a better explanation :)

Answer 3

What I've done instead now is give fixed header heights for different resolutions. It seems totally fluid is not an option here.
The code, in case anyone's interested:
#media only screen and (min-width: 568px) {
.site-branding {
background: url('http://atlanticsentinel.com/wp-content/uploads/2015/12/Atlantic-Sentinel-logo.png');
background-position: left;
background-size: contain;
background-repeat: no-repeat;
height: 100px;
padding-left: 115px; }
h1.site-title {
font-size: 2em; } }
#media only screen and (min-width: 768px) {
.site-branding {
height: 120px;
padding-left: 135px; }
h1.site-title {
font-size: 3.2em; } }
If there is another option, please let me know! I would appreciate other ideas!
Thank you for your help!