使元素在 css 缩放后表现相同

2023-12-30

我一直在用 javascript 操作 div。

有时我需要让这些 div 适合大小不断变化的容器。

实现这一目标的一种方法是使用 css 缩放。 缩放的问题在于它只是缩小了元素的图片。 系统继续以相同的方式查看元素。因此所有位置等都会变得倾斜。例如,如果我将 div 定位为 top:0%,那么如果元素已缩小,它不会达到百分之零,而是略低于百分之零,因为系统认为 div 比其视觉效果显示的要大。

这种行为的变化会导致很多复杂性,因为系统现在对根本不成立的元素做出假设。 这是糟糕的编程。

我查看了“缩放”,但文章警告不要使用它。

有什么方法可以扩展元素并保持系统更新实际情况吗?


默认变换原点是50% 50%(元素的中间),因此当您使用以下命令减小元素的大小时scale,边缘从四面八方向中间“缩回”。

因此左上角似乎向下向右移动。但是如果你将变换原点设置为0% 0%(左上)只有右侧和底部移动。

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使元素在 css 缩放后表现相同 的相关文章

  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • 如何使链接悬停时的背景图像模糊?

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content
  • 如何使用ckeditore通过ajax发送数据?

    我在 django 中有一个表格 这是 撰写邮件 形式 我将此表单从视图发送到我的模板 然后应用 ckeditor 来更改正文样式 我希望通过 ajax 发布此表单 当使用 ckeditor 时 body 字段的值不会随 request P
  • Jquery 关注下一个带有类的元素

    我正在尝试创建一个函数 当按下 Enter 键时 会选择带有类的下一个输入 我已经设法 focus 同一行中的下一个元素 但是 如果我需要选择下一行的下一个输入 它将无法继续 下一行中的第一个 quantity 文本框需要获得焦点 控制台没
  • Javascript/Node 中从不执行用户代码的隐藏线程:是否可能,如果可能,是否会导致竞争条件的神秘可能性?

    根据评论 答案 请参阅问题底部的更新 这个问题实际上是关于可能性的hidden不执行回调的线程 我有一个关于潜在的神秘场景的问题 涉及节点请求模块 https www npmjs com package request其中 A 构建完整的
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 在 JavaScript/ActionScript 中重新定义 Math.constructor 有任何实际用途吗?

    Math 对象没有原型属性 但有构造函数属性 在任何情况下重新定义构造函数会有用吗 The Math对象 准确地说 由初始值引用的对象MathECMAScript 全局对象的属性 not have a constructor属性 请参阅EC
  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自
  • 为什么 "asdf".replace(/.*/g, "x") == "xx" ?

    我偶然发现了一个令人惊讶的 对我来说 事实 console log asdf replace g x Why two替代品 似乎任何没有换行符的非空字符串都会产生此模式的两个替换 使用替换函数 我可以看到第一个替换是整个字符串 第二个替换是
  • Node.js 连接 createServer 代码

    我正在阅读 Node js Connect 版本 2 15 0 Create a new connect server return Function api public function createServer function ap
  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • 路由和干净路径(无主题标签)在 angularJS 中不起作用

    伙计们 这让我发疯了 我为此奋斗了几个小时 却找不到解决方案 我知道为了从 URL 路径中清除主题标签 我需要使用 locationProvider html5Mode true 但由于某种原因 这对我来说效果不佳 我使用 tomcat 7
  • QUnit 与固定装置的奇怪行为,测试交替失败和通过

    我在 QUnit 中进行了以下设置 Dozen or so previous tests here test Test some markup generation function qunit fixture plugin jQuery
  • 保存 dat.gui 预设以动态添加控件?

    我正在向 dat gui 界面动态添加控件 但 保存设置 功能无法识别它们 var mygui new dat GUI mygui remember mygui standard way of adding a control mygui
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi
  • (A == B == C) 比较在 JavaScript 中如何工作?

    我预计以下比较会给出错误 var A B 0 if A B 0 console log true else console log false 但奇怪的是它又回来了false 更奇怪的是 console log A B 1 returns
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或
  • 查看元素的所有 dom 事件

    我有一个 jQuery UI 日期选择器 当您单击日期时 它会清除我的 URL 哈希值 并且不会更改文本框中的日期 我假设某个地方还有其他一些 JavaScript 实用程序 它也正在调用某种委托事件 抛出错误并终止 jquery 处理程序
  • 在 Javascript 中动态创建 []array

    也许这将是一个真正愚蠢的问题 但我是 JavaScript 新手 并且坚持动态创建数组 如下格式 items Date 2012 01 21T23 45 10 280Z Value 7 Date 2012 01 26T23 45 10 28

随机推荐

  • HDFS如何管理块大小?

    我的文件大小为 65MB 默认 hdfs 块大小 64MB 那么将分配多少个 64MB 块给我的文件 是 1 64MB 块 1 1MB 块还是 2 64MB 块 如果是 2 64MB 块 剩下的 63MB 会被浪费还是会分配给其他文件 块大
  • 从 mJSP 页面获取 URL

    我将获取当前 JSP 网页的 URL 及其设置 示例 index jsp 参数 12 你有什么想法吗 谢谢 您可以从HttpServletRequest http download oracle com javaee 6 api javax
  • 将路径宽度更改为 svg 容器的 100%

    我有一个 svg 背景图像 但路径不是 100 的 svg 宽度 我也尝试过更改 keepaspectratio 但没有成功
  • Logstash:如何将文件名添加为字段?

    我使用 Logstash Elasticsearch Kibana 来概览我的 Tomcat 日志文件 对于每个日志条目 我需要知道它来自的文件的名称 我想将其添加为字段 有办法做到吗 我用谷歌搜索了一下 只发现这个问题 https sta
  • 使用 Python Requests 库上传大型 XML 文件

    我正在尝试用 Python 和 requests 库替换curl 借助curl 我可以使用curl T 选项将单个XML 文件上传到REST 服务器 我无法对 requests 库做同样的事情 一个基本场景的工作原理 payload
  • 如何在java中实用地从jar中删除特定文件/文件夹

    如何在 java 中实用地从 jar 中删除特定文件 文件夹 我有一个 jar ABC jar 包含文件 文件夹和另一个 jar 说 child jar 在child jar下我想删除一个特定的文件 我能怎么做 这样我的 ABC jar 结
  • Hibernate Map ID 自动从字段中获取

    我有类似的东西 Entity Table name claim schema test public class Claim implements Serializable Id GeneratedValue strategy Genera
  • 使用 python 获取 Windows 资源管理器中所选文件的路径

    我想在桌面上选择一些文件 然后使用 python 脚本 将通过键盘组合按下启动 获取所有选定文件的路径 我知道如何通过组合键触发脚本 但我的文件路径有问题 任何帮助将不胜感激 我明白pyHook仅读取低级键盘事件 你想做的是不可能用你的方法
  • 如何在 Web 组件中使用子元素

    我正在构建用于教育目的的普通 Web 组件 这是我的自定义复选框 class Checkbox extends HTMLElement constructor super this shadow this attachShadow mode
  • WCF OData 服务和 EF 6 问题 - 无法使用 Odata 服务公开实体

    我将 WCF 数据服务 Odata 与 NET Framework 4 5 1 和 EF 6 1 结合使用 我使用代码优先方法来创建 EF 模型 当我将此 EF 模型 AddProjectModel cs 引用到 WCF OData 服务
  • 在 Eclipse 中创建方法存根的快捷方式

    我认为在 Eclipse 中创建方法存根的一些快捷方式可能会有用 有谁知道该怎么做 Type public method see Java Editor Templates in preferences for more options o
  • 检测 Java 对象是否已被修改?

    假设我有一个标准 Java bean 即它包含的成员是String List HashMap etc 我的问题是 检测此类对象的实例是否已从先前 原始状态进行修改的最简单方法是什么 我想知道这一点的原因是 在以下情况下 我可以确定是否应该更
  • 重新加载 vue-tables-2 (Vuex) 的数据

    Module https github com matfish2 vue tables 2 https github com matfish2 vue tables 2 我正在创建一个 CRUD 应用程序 如何在 vue tables 2
  • 从 PHP 中的分隔字符串中提取浮点数

    我想将一串分隔的维度值转换为浮点数 例如 152 15 x 12 34 x 11mm into 152 15 12 34 and 11 并存储在一个数组中 这样 dim 0 152 15 dim 1 12 34 dim 2 11 我还需要处
  • 在放置新分配的对象时不调用析构函数可以吗?

    假设我有一个固定的内存缓冲区 char buffer And I 使用placement new 在该缓冲区中分配我的结构 struct S std tuple
  • 如果表单数据边界包含在附件中怎么办?

    让我们看下面的例子multipart form data 取自 w3 com http www w3 org TR html401 interact forms html h 17 13 4 2 Content Type multipart
  • 将模板应用于具有属性的子节点

    我想将模板应用于具有指定属性的子节点的节点 并且我很好奇是否可以使用
  • 获取 BQ 公共数据集中的顶级专利国家/地区和代码

    我正在尝试使用分析函数来获取专利申请量排名前 2 的国家 地区 并在这两个排名前 2 的国家 地区中获取排名前 2 的申请类型 例如 答案将如下所示 country code US P US A GB X GB P 这是我用来获取此信息的查
  • Caffe 模型为每个图像提供相同的输出

    我刚刚使用预定义的 prototxt 和 caffemodel 文件在 caffe 中加载了 alexnet 然而 将任何图像发送到模型都会返回与 fc7 层的输出相同的值 这是代码片段 net caffe Net alexnet trai
  • 使元素在 css 缩放后表现相同

    我一直在用 javascript 操作 div 有时我需要让这些 div 适合大小不断变化的容器 实现这一目标的一种方法是使用 css 缩放 缩放的问题在于它只是缩小了元素的图片 系统继续以相同的方式查看元素 因此所有位置等都会变得倾斜 例