保持长宽比混合器

2022-05-06 scss

以下示例是关于Scss中包含保持长宽比混合器用法的示例代码，想了解保持长宽比混合器的具体用法？保持长宽比混合器怎么用？保持长宽比混合器使用的例子？那么可以参考以下相关源代码片段来学习它的具体使用方法。

文件名：aspect-ratio.scss[英]：Keep aspect Ratio Mixin源码类型：Scss

@mixin ratioParent($width, $height) {
	width: 100%;
	padding-top: ($height / $width) * 100%;;
	position: relative;
	overflow: hidden;
}
	
@mixin ratioChild() {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

// Example usage:
// Image in design is 300x280px
// Send those values to the mixin
.image-wrapper {
	@include ratioParent(300px, 280px);

	img {
		@include ratioChild;
	}
}

本文地址：https://www.itbaoku.cn/snippets/785403.html

上一篇：书籍笔记:SönkeAhrens的"如何拿出智能笔记"

下一篇：滑动功能 Vanilla JavaScript

相关教程

Framework7 教程

Framework7初学者教程 - 从简单和简单的步骤学习Framework7，从基本到高级概念，包...

LESS教程

LESS初学者教程 - 从简单和简单的步骤开始学习从基本到高级的概念，包括基本概念和高级概念，包括概...

移动测试教程

初学者移动测试教程 - 从基本到高级概念的简单简单步骤学习移动测试，包括概述，平台，设备类型，Nat...

VueJS教程

VueJS初学者教程 - 从基本到高级概念的简单简单步骤学习VueJS，其中包括概述，环境设置，简介...

HANA SAP BW教程

SAP上的SAP BW初学者教程 - 从基本到高级概念的简单简单步骤学习HANA上的SAP BW，其...

Tableau教程

Tableau Tutorial for Beginners - 从简单和简单的步骤学习Table...

最新源代码片段分享

HTML文件路径

WP Ajax PHP调试

node跨域

当地人

FME- QLIK形状用于映射

日期表

显示邮政类别(PHP)

显示自定义字段表(PHP)

显示邮政(PHP)

显示发布日期(PHP)

SVG上的线路动画

求一个排列的序号

模量板

检测到外面或内部单击

扩展 - VSCODE的插件

刮擦PV的最简单方法(panda...

滑动窗口

robin karp 算法

Z 算法

消消乐

CSS:复选框设计更改

VSCODE区域

WP:未输出不必要的p标签和接触...

Laravel命令有用

下一个排列

炸玉米饼

求字符串最长包含不重复字符的子串...

KMP 算法

用DIV标签创建

2023年3月24日

热门代码标签

abap abc actionscript ada apache_conf applescript asciidoc asl assembly assembly_x86 autohotkey basic batchfile c c_cpp cirru clojure coffee coldfusion cpp csharp css d dart delphi diff dockerfile dot ejs elixir elm erlang excel forth fortran gdscript gitignore glsl go golang graphqlschema groovy haml handlebars haskell haxe html html_ruby ini io jade java javascript json jsoniq jsp jsx julia kotlin latex

保持长宽比混合器

相关源代码片段分享

相关文章

相关教程