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 混合