Can someone please tell me why the div and the image are vertically separated?
<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; object-fit:cover;">
For me the website looks like that:
Image
(I took a black Image for this.)
And if you are able to tell me the reason behind that, can you please also tell me a way to correct it, so both of those start at the same height. That it looks somehow like the following website:
petermckinnon
I would also be open for some different approaches to this.
It is because the image's vertical alignment property puts it inline with the top of the div. I've corrected it in the example below:
<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; vertical-align:bottom; background: black; object-fit:cover;">