随着窗口大小的调整而向上移动图像或 Div?

2024-02-14

我的 html 中有一个带有“stretch”类的图像。

目前,使用 css,该图像的大小会随着窗口大小的调整而调整为屏幕宽度的 100%。我还希望它在调整窗口大小时向上移动。

我假设这可以用 jQuery 来完成,但我不太确定。基本上,“顶部”CSS 值只需要随着屏幕宽度的变化而变化。

这是当前正在调整其大小的 css:

.stretch {
width: 100%;
height: auto;
min-height: 420px;
position: absolute;
top: -200px;
}

Thanks,

Wade


var origWidth;
$(document).ready(function() {
    origWidth = $(window).width();  //store the window's width when the document loads
});

$(window).resize(function() {
    var curWidth = $(window).width(); //store the window's current width
    var delta = (curWidth- origWidth);
    $(".stretch").offset({top:($(".stretch").offset().top + delta)});
    origWidth = curWidth;
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

随着窗口大小的调整而向上移动图像或 Div? 的相关文章

随机推荐

  • C++ 隐式进入/启动主要可执行错误

    我在 Mac 上运行 Hadoop 管道代码时遇到问题 这是我的 C 代码 include
  • 一起使用 ASP.Net AJAX 和 JQuery 的任何缺点

    我们计划使用 jQuery 库来增强我们的客户端 JavaScript 需求 尝试同时使用 ASP Net AJAX 和 jQuery 时是否存在任何重大问题 这两个库似乎都将 用于特殊目的 有什么冲突是我们需要注意的吗 我们还使用使用 A
  • 如何在 C# 中将泛型对象分配给非泛型引用

    我是一名 Java 人员 正在尝试用 C 实现一些代码 我研究了一个小时但没有找到任何东西 我有一个声明为通用的接口 称为 interface TypeSerializer
  • 在 Python 正则表达式中使用 ^ 匹配行首

    我正在尝试从 Thomson Reuters Web of Science 中提取出版年份 ISI 风格的数据 出版年份 的行看起来像这样 在行的最开头 PY 2015 对于我正在编写的脚本 我定义了以下正则表达式函数 import re
  • 我的 C 程序如何检查它是否对给定文件具有执行权限?

    有没有办法判断进程是否may执行文件而不必实际执行它 例如通过调用execv filepath args 只是失败并发现errno EACCES I could stat文件并观察st mode 但我仍然不知道这与这个过程有什么关系 理想情
  • groupby pandas 数据帧上的算术运算

    我有一个包含 40 列和 400000 行的 pandas 数据框 我创建了一个包含 3 列的汇总数据集 现在 我需要根据其中两列计算百分比指标 Python 抛出错误 unsupported operand type s for Seri
  • 您见过合理使用受保护的内部访问修饰符的设计吗?

    我没有 但我不说没有 所有读过本文的 C 开发人员可能都知道什么是内部受保护的以及何时使用它 我的问题很简单 您是否真的使用过它或使用受保护的内部访问修饰符开发过成功设计的项目 如果是 请分享您的知识并发布漂亮的示例 在这里我终于可以欣赏到
  • OpenCV / SURF 如何从描述符中生成图像哈希/指纹/签名?

    这里有一些主题对于如何查找相似图片非常有帮助 我想做的是获取图片的指纹 并在数码相机拍摄的不同照片上找到相同的图片 SURF 算法似乎是独立于缩放 角度和其他扭曲的最佳方法 我使用 OpenCV 和 SURF 算法来提取样本图像上的特征 现
  • 将 Arduino Uno 与以太网扩展板连接到 parse.com 数据库

    嘿 我是 Arduino 编程新手 我想知道如何连接我的设备以将数据存储到 parse com 我知道 REST API 密钥 但不知道该怎么做 任何帮助将不胜感激 如果可能的话您可以提供源代码或示例 Thanks 现在这是可能的 Ardu
  • 什么是 Base64 明文用户名和密码?

    最近我在一篇基础认证文章中看到了这个词 网络上的 Base64 明文用户名和密码意味着什么 Thanks 在 HTTP 基本身份验证中 密码 用户名 以 Base64 编码 由于它没有加密 所以它是明文的 这是一个示例授权标头 Author
  • Knockoutjs 嵌套 observableArrays

    我在淘汰嵌套可观察数组方面遇到一些麻烦 我的数据如下所示 var myData Id 123 Name string here Categories Id 12 Name Category Name Products Id 1 Name P
  • 在图像下方显示文本

    我有一个带有超链接的图像 并且想在图像下方显示文本 编辑 我的输出应该像在记分卡下一样 我需要看到一张图像 谷歌 及其下方的文本 而在仪表板下 我需要看到两张图像 亚马逊 微软 及其下方的文本 下图是我所期待的 看图片 https i st
  • 覆盖没有默认值的 CSS 属性

    如果 CSS 中的属性没有默认值 是否可以覆盖该属性 例如 假设您的主样式表定义了特定元素的边框 element border 1px solid 000 如果您想禁用辅助样式表的边框 您可以这样做 element border none
  • WordPress图片上传使用ajax?

    我正在 WordPress 中制作前端分析器 我想从前端上传用户照片 我的整个个人资料都在 WordPress ajax 上 我只是想将照片上传到wp content uploads 但从前面使用ajax 我想要两件事 1 媒体挂钩 2 通
  • Spring Security中WebExpressionVoter和AuthenticatedVoter的区别

    Spring Security中的WebExpressionVoter和AuthenticatedVoter有什么区别 我所知道的是 AuthenticatedVoter 将搜索字符串 IS AUTHENTICATED FULLY IS A
  • 键入:从有效值列表动态创建文字别名

    我有一个函数验证其参数以仅接受给定的有效选项列表中的值 在打字方面 我使用Literal输入别名 如下所示 from typing import Literal VALID ARGUMENTS foo bar Argument Litera
  • C 猜数字游戏,使用 isdigit() 验证

    我正在研究教科书上的一个挑战问题 我应该生成一个 1 10 之间的随机数 让用户猜测 并使用 isdigit 验证他们的响应 我 大部分 让程序与下面的代码一起工作 我遇到的主要问题是 使用 isdigit 需要将输入存储为字符 然后我必须
  • 在处理给定的数据集时,如何为 zlib 'setDictionary' 找到一个好的/最佳的字典?

    我有一组 大量 类似的数据文件 该集合正在不断增长 单个文件大小约为10K 每个文件必须单独压缩 压缩是通过 zlib 库完成的 该库由java util zip Deflater班级 当使用以下方式将字典传递给 Deflate 算法时se
  • ElasticSearch 是用于自动完成\提前输入的 edgeNGram,我的 search_analyzer 是否被忽略

    我有三个带有 userName 字段的文档 布里安迪利 布里昂布尔 布里安格里芬 当我搜索 brian 时 我会按预期返回所有三个 但是当我搜索 briandilley 时 我仍然会返回所有三个 分析 API 告诉我它在我的搜索字符串上使用
  • 随着窗口大小的调整而向上移动图像或 Div?

    我的 html 中有一个带有 stretch 类的图像 目前 使用 css 该图像的大小会随着窗口大小的调整而调整为屏幕宽度的 100 我还希望它在调整窗口大小时向上移动 我假设这可以用 jQuery 来完成 但我不太确定 基本上 顶部 C