scss CSS纵横比
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss CSS纵横比相关的知识,希望对你有一定的参考价值。
/**
* Ratio styles
*/
.ratio {
position: relative;
width: 100%;
// 1:1 ratio (default)
&:before {
content: "";
display: block;
padding-top: 100%;
}
// 2:1 ratio
&.ratio-2-1:before{
padding-top: 50%;
}
// 1:2 ratio
&.ratio-1-2:before{
padding-top: 200%;
}
// 4:3 ratio
&.ratio-4-3:before{
padding-top: 75%;
}
// 16:9 ratio
&.ratio-16-9:before{
padding-top: 56.25%;
}
.ratio-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.thumbnail, .content {
@include transform(translate3d(0, -50%, 0));
width: 100%;
position: absolute;
top: 50%;
}
// thumbnail overlay
.thumbnail {
z-index: 0;
}
// text content that is vertically aligned
.content {
color: red;
padding: 0 15px;
z-index: 10;
}
}
以上是关于scss CSS纵横比的主要内容,如果未能解决你的问题,请参考以下文章
scss 纵横比SCSS Mixin
scss 响应纵横比Mixin
scss 保持纵横比
css裁剪图像保存纵横比
具有持久纵横比的响应式 CSS 网格
css 保持图像的纵横比