scss 流体比率图像

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 流体比率图像相关的知识,希望对你有一定的参考价值。

// credit Rolf Timmermans
// http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
  $width-large: nth($large-size, 1);
  $width-small: nth($small-size, 1);
  $height-large: nth($large-size, 2);
  $height-small: nth($small-size, 2);
  $slope: ($height-large - $height-small) / ($width-large - $width-small);
  $height: $height-small - $width-small * $slope;

  padding-top: $slope * 100%;
  height: $height;

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

figure.fluidratio {
  /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
  @include fluid-ratio(800px 200px, 300px 150px);

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}

以上是关于scss 流体比率图像的主要内容,如果未能解决你的问题,请参考以下文章

scss 流体宽度视频(响应视频嵌入)

scss 多流体上浆混合物现在与rem!

scss 波旁Susy流体布局与静态排水沟

scss 波旁Susy流体布局与静态排水沟

scss 采用CSS Poly Fluid Sizing的流体响应式排版

用于小型和大型(流体/响应)列的 Zurb Foundation 4 SCSS 混合