javascript - 如何检测图像是否可见?
问题描述
所以我有一个表服务器块。在桌面和大屏幕上,表单显示在其右侧的图像。在较小的屏幕上,图像是隐藏的。
当图像被隐藏时,我想让表格更宽以填补缺失的空间。图像没有自己的 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 编辑器在页面中不包含表单时,默认情况下该行应该是全宽的。
我的CSS.gatedbg
@media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
EPIserver 或 ASP.Net/MVC 中是否有一种方法可以检测背景图像何时从浏览器的视图中隐藏?
如果我理解正确,我不能在这个剃须刀页面中使用 javascript,因为它是服务器端代码?
解决方案
这些pb-5 pt-3
类可能是某些网格系统的一部分,负责列宽?960px 是否对应于该系统使用的响应断点之一?
如果是这样,您可能只需要设置不同的类(使表单全宽,并完全隐藏“图像”列);
否则,您可能需要在样式表中明确覆盖来自这些类的宽度。
推荐阅读
- jquery - jQueryUI自动完成在没有匹配时在下拉列表中显示“其他”并让用户能够选择它
- sql - 在 SQL 中的单行中列出多个列
- mongodb - 另一个领域的流星天文触发验证错误
- url - JMeter: How can I capture the variable value which is dynamic in url?
- python - 仅在 python 中将日期格式更改为其各自的月份和年份
- android - 如何在 R8 混淆后使用回溯获取正确的行号?
- php - 将php值传递给html
- grafana - 如何在 Grafana 的单个警报通知电子邮件中发送多个值?
- java - 代替 Maven 仓库,使用 .m2 目录
- jenkins - Jenkins:由提交到目标分支触发的 PR 管道