2020-02-22 今天学了啥？

Posted 2020-11-25 ylweb

CSS如何实现固定宽高比

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

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

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

.wrap{
  width: 50vw;
}
img{
  width: 100%;
  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;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}