CSS媒体：如何仅在出现滚动条时运行媒体代码（或如何使用JavaScript进行模拟）？

在这种情况下，我如何使用CSS@media来模拟javaScript

例如，我只想在图像高度大于窗口高度时，或者因为图像高度太长而只显示右滚动条时，在@media内运行代码

.img-container {
    text-align: center;
}

@media (min-height: 60em) {
    .img-container {
        display: inline-block;
        height: 100vh;
        width: 100%;
        text-align: center;
        border: 4px solid green;
    }

    .img-container img{
        height: 100%;
    }
}

如果我的html中有这个图像

    <div class="img-container">
        <img src="http://placehold.it/400x850"> <-- a long image height so run the code inside @media
    </div>

我想这就是我想要的答案：

.img-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.img-container img{
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
}

你到底想要什么？每当滚动条出现时检测的CSS选择器？
每当滚动条出现时检测的CSS选择器-如果可能的话，是的。那么，如果您已经可以使用JavaScript来检测它，为什么不切换元素上的类（例如
主体
）并在选择器中使用该类呢？另一方面，如果您只想让图像小于屏幕高度，您可以将
max height
与
vh
@xpy
一起使用。您可以将max height与vh一起使用。
如何使用？我有
高度：100vh已经存在于我的代码中了，不是吗？默认情况下，
最大高度：100vh
，而不是在媒体查询中，
.img容器
的高度永远不会大于vieport高度。
.img-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.img-container img{
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
}