- 假设要实现以下功能,随着视图的变化,图片始终保持如图的比列,放大或缩小
- 图片动态演示
实现
- 抽象一下如图所示
- aw:宽高比宽度
- ah:宽高比高度
- w1:大图像的宽度
- h1:大图像的高度
- w2:小图像的宽度
- h2: 小图像的高度
- m:图像之间的边距
- 结合图可以得到如下表达式
- w1 + m + w2 = 100%
- 2 × h2 + m = h1
- w1 / aw × ah = h1
- w2 / aw × ah = h2
- 现在开始求解决w1(然后是w2)。开始在公式2)中分别用公式3)和4)代替h1和h2,然后求解为w2如图所示:
- 然后,我可以在公式1)中用w2的结果替换它,并为w1求解:
- 用红色圈出的结尾处的表达式。它只包含边距,宽高比宽度和宽高比高度 - 在运行时都不会改变。因此,它是我们可以在构建时预先计算的常数值。为方便起见,我将此命名为常量值c:
c = (m × aw) / (ah × 3) w1 = 2/3 × (100% − m) + c w2 = 1/3 × (100% − m) − c 复制代码
代码
<!--html--> <div class="thumbnails"> <img src="https://placeimg.com/400/300/animals" alt="A randomly selected animal photo"> <img src="https://placeimg.com/400/300/nature" alt="A randomly selected nature photo"> <img src="https://placeimg.com/400/300/arch" alt="A randomly selected archirecture photo"> </div> <!--scss--> // Using values from the original design $margin: 20px; $aspect-width: 4; $aspect-height: 3; // Calculate c $constant: ($margin * $aspect-width) / ($aspect-height * 3); .thumbnails { width: 50%; margin: 0 auto; padding: $margin; border: 2px solid black; overflow: hidden; // crude clearfix // First image becomes big one on left > *:first-child { display: block; float: left; margin-right: $margin; // Magic formula! width: calc( (2 / 3 * (100% - #{$margin}) ) + #{$constant} ); } // 2nd & 3rd images become smaller ones // on right > *:nth-child(n + 2) { display: block; float: right; // Magic formula! width: calc( (1 / 3 * (100% - #{$margin}) ) - #{$constant} ); } // 3rd image also has top margin > *:nth-child(3) { margin-top: $margin; } } 复制代码
参考链接
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 袜子商店应用:一个云原生参照应用
- Android 应用中跳转到应用市场评分
- 授之以渔-运维平台应用模块一(应用树篇)
- OAM(开放应用模型)——定义云原生应用标准的野望
- ChromeOS 终端应用程序暗示其即将支持 Linux 应用
- Android应用之间数据的交互(一)获取系统应用的数据
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
计算机程序设计艺术(第3卷)
Donald E.Knuth / 苏运霖 / 国防工业出版社 / 2002-9 / 98.00元
第3卷的头一次修订对经典计算机排序和查找技术做了最全面的考察。它扩充了第1卷对数据结构的处理,以将大小数据库和内外存储器一并考虑;遴选了精心核验的计算机方法,并对其效率做了定量分析。第3卷的突出特点是对“最优排序”一节的修订和对排列论与通用散列法的讨论。一起来看看 《计算机程序设计艺术(第3卷)》 这本书的介绍吧!