margin: auto;
top: 0;
bottom: 0;

SerginhoLD
отлично! Воспользовался твоим вариантом!

все работает отлично! Изображение растягивается на всю ширину экрана, и выравнивается по середине вертикали!

body {
	background-image: url(../1.jpg);
    color: white;
    margin: 0;
    width: 100%;
    overflow:  hidden;
} 

#page {
    background: url(../2.jpg) no-repeat center;
    background-size: contain;
    display: block;
    height: calc(100vw/ШИРИНА_2.jpg*ВЫСОТА_2.jpg);
    position: absolute;
    width: 100%;
    margin: auto;
    top: 0;
    bottom: 0;
}

Но дело в том, что расширения экранов бывают разные, на некоторых, если растянуть изображение на всю ширину, то не хватает высоты, чтоб поместить изображение целиком! В таком случае надо растянуть изображение не на ширину, а на высоту экрана.
Т.е. в css должно определяться, растягивать на ширину или высоту.
Собственно это мне и предстоит реализовать!

Теперь собственно вопрос, можно ли каким-нибудь образом в css сравнить два значения?

Попробую сделать с помощью @ media

сделал так

@media screen and (min-aspect-ratio: ШИРИНА/ВЫСОТА) {
}
@media screen and (max-aspect-ratio: ШИРИНА/ВЫСОТА) {
}

Всем спасибо за участие!