2020-02-25 今天学了啥?

CSS如何实现固定宽高比

一、元素尺寸已知,直接写宽高

二、尺寸未知,可替换元素(img、video等),指定宽度或者高度,另一个自动计算。

<div class="wrapper">
  <img src="./picture" alt="">
</div>


.wrap{
  width50vw;
}
img{
  width100%;
  height: auto;
}

三、普通元素实现固定宽高比

使用padding-top/padding-bottom实现

<div class="wrapper">
  <div class="box"></div>
</div>

.wrap{
  width: 50vw;
}
.box{
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
}

上述使用padding-bottom来撑开盒子,实现4/3的比例。但是如果box盒子要放入内容的话,可以使用绝对定位来充满盒子。

.box{
  position: relative;
  width100%;
  height0;
  padding0;
  padding-bottom75%;
  margin50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top0;
  right0;
  bottom0;
  left0;
}
posted @ 2020-02-25 22:48  Lorin-Yang  阅读(140)  评论(0编辑  收藏  举报