# 如何实现宽高定比例自适应 a certain aspect
2018-10-08 本文已影响16人
张培_
重点：
- 当margin/padding取形式为百分比的值时,以父元素的宽度作为参照物
- 当left/top取形式为百分比的值时,以父元素的宽度作为参照物
- 当left/top取形式为百分比的值时,以父元素的高亮作为参照物
如何实现宽高比固定的自适应元素
让宽高按照一定的比例，那么就需要宽高有一个确定的参照系。
- 使用单位
vh/vw实现 - 利用padding或者margin的百分比实现
使用单位vh/vw实现
-
vh/vw: 分别指代浏览器的视窗高度和宽度
因此我们可以用同一个视窗单位设置宽高的值
-
例子：设置宽高
16：9的div.container{ background: fuchsia; height: 28.125vh; width: 50vh; } <div class="video"> <div class="container"></div> </div>
利用padding或者margin的百分比实现
由于padding的值如果是%那么就是宽度的%，通常需要在元素外面加上一个wrapper元素
- 对wrapper元素：这个元素是一个空白元素，设置padding top/left 或者 bottom/right 将元素撑开,并设置padding-top和padding-left的值比例和要求的一致
position: relative(只有这样才能保证子元素可以占据padding的位置)作为目标元素的容器 - 目标元素设置
position: absolute left：0 top：0和外层的container吻合。设置width: 100% height:100%完全填充wrapper元素。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test scaling picture</title>
<style>
.video {
width: 800px;
}
.container{
position: relative;
padding-top: 56%;
padding-left: 64%;
}
iframe {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<h1>
按比例缩放图片16:9
</h1>
<div class="video">
<div class="container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cCOL7MC4Pl0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
