如何检测图像是否可见？

Question

所以我有一个用于表单的 episerver 块。在桌面和大屏幕上，表单显示在其右侧的图像。在较小的屏幕上，图像是隐藏的。

当图像被隐藏时，我想让表格变宽以填补缺失的部分space。图片没有自己的divclass。是包含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 编辑器在页面中不包含表单时，该行默认为全宽。

我的 css .gatedbg

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

EPIserver 或 ASP.Net/MVC 中是否有检测背景图像何时在浏览器中隐藏的方法？

如果我没理解错的话，我不能在这个 razor 页面中使用 javascript 因为它是服务器端代码？

Answer 1

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

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

否则您可能需要在您的样式表中显式覆盖那些类的宽度。

如何检测图像是否可见？

How to detect whether an image is visible or not?

html

javascript

css

asp.net

episerver