Div and Image vertically missalligned when height: 100vh

Question

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.

score 2 · Accepted Answer · answered Jan 06 '20 at 18:50

2

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;">

answered Jan 06 '20 at 18:50

jeffjenx

17,041
6
57
99

Hell yes, thank you!!! – Schweini Jan 06 '20 at 18:53
1

Schweini, if this answers your question, you should mark it as "Accepted" and give it an up-vote so others know it was beneficial. – chris Jan 06 '20 at 19:23

Div and Image vertically missalligned when height: 100vh

1 Answers1