2013年7月的这篇文章介绍了一种使用伪元素来维持元素长宽比(即使缩放)的方法。
这是一个Sass mixin,可以简化数学运算。
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
mixin假定您将在初始块内嵌套具有内容类的元素。 像这样:
<div class="sixteen-nine">
<div class="content">
insert content here
this will maintain a 16:9 aspect ratio
</div>
</div>
使用mixin很简单:
.sixteen-nine {
@include aspect-ratio(16, 9);
}
结果:
.sixteen-nine {
position: relative;
}
.sixteen-nine:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.sixteen-nine > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
演示版
这是一个演示上述代码的示例。 添加了动画以显示元素在调整大小时保持分配的纵横比。
见笔保持长宽比演示由肖恩·邓普西( @seanseansean )上CodePen 。
感谢Sean Dempsey ( @thatseandempsey )的帮助!
翻译自: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/