如何根据视口高度实现图片的显示与隐藏

我需要在页面两侧展示图片，但有时页面高度小于所有图片的总高度。我尝试使用媒体查询解决该问题，相关代码如下：

.image1{
    display: none;
    width: 35em;
    position: absolute;
    top: 26em
}
.image2{
    display: none;
    width: 35em;
    position: absolute;
    top: 78em;
    right: 0;
}
.image3{
    display: none;
    width: 35em;
    position: absolute;
    top: 120em;
    left: 0;
}

@media (min-height: 0vh) and (max-height: 15vh)  {
    .image1{
        display: block !important;
    }
}
@media (min-height: 16vh) and (max-height: 25vh)  {
    .image1{
        display: block !important;
    }
    .image2{
        display: block !important;
    }
}
@media (min-height: 26vh) and (max-height: 900vh)  {
    .image1{
        display: block !important;
    }
    .image2{
        display: block !important;
    }
    .image3{
        display: block !important;
    }
}

预期效果如下：

内容的提问来源于stack exchange，提问作者Richárd Bakos