如何检测图像是否可见？

Question

所以我有一个表格形式的Episerver块。 在台式机和大屏幕上，表单显示在右侧。 在较小的屏幕上，图像被隐藏。

隐藏图像后，我想扩大表格的宽度以填补缺失的空间。 该图像没有自己的div类。 它是包含div的背景图片。

<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
    <div class="row">
        <div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
            <div class="row">
                <div class="@(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
                    <div class="whitepaper">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我还修改了上面的内容，以便通过EPIserver编辑器在页面中不包含表单时，默认情况下该行应为全角。

我的.gatedbg CSS

@media (max-width: 960px) {
    .gatedbg {
        background-image: none !important;
    }
}

EPIserver或ASP.Net/MVC中是否有一种方法可以检测背景图像何时从浏览器视图中隐藏？

如果我理解正确，则无法在此剃刀页面中使用javascript，因为它是服务器端代码？

Answer 1

这些pb-5 pt-3类大概是某些网格系统的一部分，这对列宽负责吗？ 960px是否对应于该系统使用的响应断点之一？

如果是这样，您可能只需要设置不同的类（使表单具有完整宽度，并完全隐藏“ image”列）；

否则，您可能需要覆盖样式表中显式来自这些类的宽度。