gpt4 book ai didi

css - 我如何使用 transform 仅通过 css 来缩放除法

转载 作者:行者123 更新时间:2023-11-28 15:42:23 25 4
gpt4 key购买 nike

问题陈述:

我正在使用以下内容来缩放 <div>仅使用 CSS 调整窗口大小:

position:       relative;
width: 40%;
height: 0em;
padding-bottom: 30%;

就宽度和高度而言,它是有效的。

该部门包含一个静态 <img>而且它的扩展性也不错。

但是,内容还包括使用 new Image() 的动态图像 (.png)创建它和进一步的 JS 代码来移动它。而且这个 .png <div> 的大小缩放.事实上,这个 .png 甚至没有显示。

如果我使用 Safari 进行放大和缩小,一切都会缩放 - <div>大小和静态图像。 .png 也会按应有的方式显示。

问题:

那么...我如何使用变换和类似的调用来模拟缩放以替代上述位置-宽度-高度-paddingbottom 组?

[已编辑] 2015 年 9 月 27 日

FWIW,我对 jsFiddle 很陌生,只是添加了一个 jsFiddle。希望这会结束所有讨论(当然,这个 jsFiddle 中说明的问题的解决方案除外)... http://jsfiddle.net/johnlove/yL2td3r2/

[已编辑] 2015 年 9 月 5 日

我不知道这是否会适得其反......但是:

(a) 寻求代码帮助的问题必须包括所需的行为:

我已经说过“使用 CSS 调整窗口大小来缩放 <div>

(b) 特定问题或错误:

我已经说过 .png 不会<div> 的大小缩放.

(c) 重现它所需的最短代码

我故意忽略了这个,因为我选择了寻找如何使用 transform 而不是上面的灰色 block 。此外,我知道转换有效,包括 .png。我不知道的是如何调整 transform: scale[xxx]根据不断变化的窗口宽度。

我试图用窗口宽度缩放的“野兽”是“相机快门”jQuery 插件。顺便说一句,上面的“.png”是黑色相机快门本身。

(d) 下面的其他回复转入 SVG 领域,我根本不理解任何内容,没有,zip。

最佳答案

第一步是承认你有问题——在这种情况下,问题是你对 CSS 的沉迷(以系统的方式做任何几何上全面的事情)。没关系,这是整个行业的灾难性遗留问题,甚至还没有开始 [blah blah] 的过程试试 SVG-everything 方法,它对我有用。
https://github.com/Terebinth/Vickers

注意在第 63 行使用 transform_matrix https://github.com/Terebinth/Vickers/blob/master/lib/vickers__workshop.coffee#L63

(作为一个整体,Vickers 迫切需要重构——数据流/数据结构设置方面的不足,以及与 shouldComponentUpdate 的 Immutables 库使用不足相关的性能问题,以及只是风格和一致性——但它仅用于原型(prototype)制作,我已经继续前进。我希望它能激励人们走出 HTML/CSS 贫民窟)

关于css - 我如何使用 transform 仅通过 css 来缩放除法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32410320/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com