Vertical center image without pos:absolute inside pos:relative - html

Question

The header of my blog shows the title with an image behind. I want that this image have it's own height until it gets bigger than 50vh (50% of user viewport).
But the normal behavior is the image be cropped from bottom and I want that the image be cropped from top and bottom (in other words: I want the image vertically centered).
I could do this with top: 50%; transform: translateY(-50%) but in that case img should be position: absolute and that would make the header always with the same height (since the image couldn't set the height of the element).
This is my code:
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
On the following example, please resize jsfiddle width as much as you can. That will be easier to understand.
https://jsfiddle.net/jkc3L13g/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
max-height: 70vh;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>

Answer 1

Instead of <img> tag, use the image as a CSS background image for .header, then set background-size: cover and background-position: center (this will align the image), but you also need to set a fixed height for .header.
This will look a bit different, hope it can help you.
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
JSFiddle: https://jsfiddle.net/jkc3L13g/1/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
height: 70vh; /* fixed height */
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>