宽高固定比例

宽高固定比例

一、前言

主要介绍在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-toppadding-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()

  • 采用的是paddingcalc()配合在一起使用。
  • 其实原理和第一个方案是一样的。
  • 只不过在第一个方案中,我们每次都需要对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]

posted @ 2021-06-22 21:40  黄哈哈。  阅读(196)  评论(0编辑  收藏  举报