返回列表 回复 发帖

[技巧心得] 响应式img、iframe、object、video和embed等元素的比例缩放

固定纵横比

基于width的百分比来设置padding百分比值,把这种方式称之为固定纵横比。一般我们通过width的百分比来计算padding-top或padding-bottom的百分比值,其计算公式如下:
padding-top = (元素高度 / 元素宽度) * 100%
padding-bottom =  (元素高度 / 元素宽度) * 100%
9 / 16的固定纵横比例,计算出来就是56.25%。根据这个原理,我们可以在CSS处理器做相关处理:
  1. @mixin fixed-aspect-rations($height, $width) {
  2.     padding-bottom: $height / $width * 100%;
  3.     // 或者
  4.     padding-top: $height / $width * 100%;
  5. }
复制代码
当然还可以写一个@function。
  1. @function aspect-ratio($height, $width) {
  2.     $aspect-ratio: $height / $width * 100%;

  3.     @return $aspect-ratio;
  4. }
复制代码
http://www.w3cplus.com/css/experiments-in-fixed-aspect-ratios.html
返回列表