保持宽高比 - 技术栈

文章目录

- padding
- - 实现
  - 填充
- aspect-ratio

在开发中，多少都会碰到一个需求，保持一个合适的宽高比，比如展示一些图片或者视频的时候，会需要保持合适的宽高比，比如 4:3 16:9 等等，本文介绍两种方式

padding

实现

利用 padding 实现这个需求的话，优点兼容性好，但是会复杂一点

我们直接看代码，如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 100vw;
      height: 100vh;
      padding-top: 100px;
      overflow: hidden;
    }

    .box {
      margin: auto;
      width: 50%;
      height: 0;
      padding-bottom: 26%;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

</html>

直接看效果，如图：
那这个效果为什么可以实现呢，关键就在于这个 padding-bottom，要知道这个，我们首先就需要知道一点，padding 是怎么计算自己的值的，如图：
也就是说如果包含box的元素的宽度为 100px，那么 padding-bottom: 50% 的值就为 50px，我们看一下这里的 box 的数值，，如图：
在看上一下包含 box 元素的 container 元素的数值，如图：
使用这个 703 * 26% 是不是就和这个 182.77 的值相差无几啊，所以这个经过验证也是没有错的
当然一般情况下这个 box 和 container 的宽度应该是一致的，这里我是为了进行测试而书写的

填充

上述虽然实现了效果，但是存在一个问题，高度为 0，是不是无法承载其他元素了，实际上是可以存放元素的，但是会在某些情况下，css样式会起不到预期的效果，所以通常，我们会进行如下的操作，代码结果更改为如下：
html 复制代码
```
<div class="container">
    <div class="box-outer">
      <div class="box-inner">
        <div class="box-img">
          <img src="./1.jpg" />
        </div>
      </div>
	</div>
</div>
```

就是利用定位实现，css样式如下：

css 复制代码

.box-outer {
	margin: auto;
	width: 50%;
}

.box-inner {
	width: 100%;
	height: 0;
	padding-bottom: 50%;
    background-color: skyblue;
    position: relative;
}

.box-img {
    position: absolute;
    inset: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
}

.box-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

效果如图：

aspect-ratio

这是一个比较新的属性，可以非常方便的设置宽高比，使用的方式也非常简单 宽/高，如图：

使用如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      width: 100vw;
      height: 100vh;
      padding-top: 100px;
      overflow: hidden;
    }


    .box-img {
      margin: auto;
      width: 50%;
      /* 设置比例为 16:9 */
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }

    .box-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box-img">
      <img src="./1.jpg" />
    </div>
  </div>
</body>

</html>

效果如图：
一样可以实现这样的效果，只不过兼容性有待提高，如图：