CSS 以 100% 宽度缩放元素

2024-01-03

我有兴趣缩小 100% 宽度的 div。我遇到的问题是,当我缩小元素时,它会获得固定宽度,并且不再延伸 100% 的宽度。

例子 -http://jsfiddle.net/Fz7qh/2/ http://jsfiddle.net/Fz7qh/2/

当我使用CSS缩放属性(而不是transform:scale)时,它按预期工作,但我听说缩放属性没有得到很好的支持。我的问题是这可以通过 CSS 变换比例来实现吗?


为了模仿什么zoom在这种情况下,属性确实如此,您可以添加-transform-origin: 0 0;并设置width to oldWidth / newScale (100 / 0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/ http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}​
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 以 100% 宽度缩放元素 的相关文章

  • 如何将 em 标签重新设置为粗体而不是斜体

    我想让文本在 em 标记粗体而不是斜体 有没有办法用 CSS 来实现这一点 当然 使用以下 CSS 代码 em font weight bold font style normal em
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这
  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 仅使用 HTML 和 CSS 制作弧形帆形状?

    是否可以仅使用 HTML 和 CSS 创建下面的弧形帆形状 我可以看到从这个答案 https stackoverflow com questions 7073484 how does this css triangle shape work
  • 为什么我无法对自定义属性(又名 CSS 变量)进行动画处理?

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • IE9 表格布局固定 colspan 不受尊重

    我发现这个主题 我的主题相关但不相同 在 IE9 中的 tds 上使用 cols 和 colspan 进行表格渲染 https stackoverflow com questions 14236408 table rendering wit
  • 如何使一个 div 位于另外两个 div 的中间以跨越多行,就像表中的 rowspan 一样

    我已经有一段时间试图避免使用表格来布局元素了 因为我意识到它们并不是为此而设计的 并且像 div p 这样的普通容器元素以及 CSS 足以实现人们可能需要的任何布局 到目前为止 我已经取得了成功 但有一种情况我似乎无法独自克服 我基本上需要
  • 如何在加载ajax内容和javascript时加载gif图像[重复]

    这个问题在这里已经有答案了 我一直在尝试加载 gif 图像 直到 ajax 加载数据并显示它 但我对此感到安慰 我希望你能帮助我 这是我的高级搜索代码 现在我想为此添加加载 gif ajax type POST url base rul s
  • 防止页面跳转到iframe

    我正在尝试通过 iframe 将 wetransfer 集成到网站中 但是当页面加载时遇到问题 它会跳转到页面的一半 因此它专注于 iframe 而不是在页面顶部打开 据我所知 wetransfer 网站上有一个脚本告诉它跳转到该部分 而不
  • 如何创建一个对角分割的页面,两半是可点击的链接

    我需要创建一个对角分割的登陆页面 像这样的东西 我需要页面的两个区域都是可单击的 并且在最好的情况下 所有内容都应该动态地适应用户的显示器 以便显示器始终分成两半 我该怎么做 我应该使用画布吗 欢迎任何建议 以及如果我使用画布可能的后备方案
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • IE 上具有最小宽度的内联跨度

    Hi我有 3 个SPAN那一定是inline并且有和一个min width 显然在 IE 上 SPAN不能有一个min width 我尝试使用DIV但当我把它放在inline the min width是忽略 CSS span displa
  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件?

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 手机上的网页滚动条可以隐藏吗?

    我正在尝试在移动设备上隐藏滚动条 一切在桌面上看起来都很好 没有滚动条 但是当我检查某些 Android 设备 ipad 时 我仍然可以看到灰色 细小的拇指 可以从浏览器中隐藏预定义的滚动条 我的代码 在桌面上运行良好 body webki

随机推荐