时间戳

首页 > 技术文章 > 宽高固定比例

宽高固定比例

jiajia-hjj 2021-06-22 21:40 原文

宽高固定比例

一、前言

主要介绍在Web中如何实现纵横比，主要是用于响应式设计中的iframe、img和video之类的元素。

margin/padding百分比相对于父元素宽度。

二、HTML结构

使用CSS实现容器长宽比，常见的HTML模板结构如下：

<div class="aspectration" data-ratio="16:9">
    <iframe height="498" width="510" src="http://player.youku.com/embed/XMTg0MjQ2NzY3Ng==" frameborder="0" allowfullscreen=""></iframe>
</div>

三、实现方案

3.1.垂直方向的padding(推荐)

  • 主要借助的原理是：利用padding-top或者padding-bottom的百分比值，实现容器长宽比。

  • 在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。

  • 如此一来就很好的实现了容器的长宽比。

  • 采用这种方法：

    • 需要把容器的height设置为0。（容器的高用padding-top来撑开容器）
    • 而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。

  • 比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。

具体的CSS代码如下：

*{margin: 0;padding: 0; list-style: none;}
.aspectration {
    position: relative;
    height: 0; 
}
.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}

.aspectration[data-ratio="4:3"]{
    padding-top: 75%;
}
.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000
}

3.2.padding & calc()

  • 采用的是padding和calc()配合在一起使用。
  • 其实原理和第一个方案是一样的。
  • 只不过在第一个方案中，我们每次都需要对padding的值计算，如果使用calc()可以通过浏览器直接计算出padding的百分比值。
.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

3.3.padding & 伪元素

  • 前面的方案都是在.aspectration元素上使用padding值。
  • 但在CSS中，还可以使用CSS的伪元素::before或::after来撑开容器。
.aspectration {
    position: relative;
}
.aspectration:after {
    content: "";
    display: block;
    width: 1px;
    margin-left: -1px;
    background-color: orange;
}

.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}

3.4.视窗单位

  • CSS新特性中提供了一种新的单位vw，浏览器100vw表示的就是浏览器的视窗宽度(Viewport)。

  • 16:9对应的就是100vw * 9 / 16 = 56.25vw，这里不再是padding了，而是把这个值给height。

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
    position: relative;
}

[DEMO]

推荐阅读