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 保持图像的纵横比