当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: 在开发中，多少都会碰到一个需求，保持一个合适的宽高比，比如展示一些图片或者视频的时候，会需要保持合适的宽高比，比如 4:3 16:9 等等，本文介绍两种方式。使用这个 703 * 26% 是不是就和这个 182.77 的值相差无几啊，所以这个经过验证也是没有错的。当然一般情况下这个 box 和 container 的宽度应该是一致的，这里我是为了进行测试而书写的。这是一个比较新的属性，可以非常方便的设置宽高比，使用的方式也非常简单。利用 padding 实现这个需求的话，优点兼容性好，但是会复杂一点。

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

padding

实现

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

  2. 我们直接看代码，如下：

    <!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>

  3. 直接看效果，如图：

    在这里插入图片描述

  4. 那这个效果为什么可以实现呢，关键就在于这个 padding-bottom，要知道这个，我们首先就需要知道一点，padding 是怎么计算自己的值的，如图：

    在这里插入图片描述

  5. 也就是说如果包含box的元素的宽度为 100px，那么 padding-bottom: 50% 的值就为 50px，我们看一下这里的 box 的数值，，如图：

    在这里插入图片描述

  6. 在看上一下包含 box 元素的 container 元素的数值，如图：

    在这里插入图片描述

  7. 使用这个 703 * 26% 是不是就和这个 182.77 的值相差无几啊，所以这个经过验证也是没有错的

  8. 当然一般情况下这个 box 和 container 的宽度应该是一致的，这里我是为了进行测试而书写的

填充

  1. 上述虽然实现了效果，但是存在一个问题，高度为 0，是不是无法承载其他元素了，实际上是可以存放元素的，但是会在某些情况下，css样式会起不到预期的效果，所以通常，我们会进行如下的操作，代码结果更改为如下：

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

  2. 就是利用定位实现，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;
}

  3. 效果如图：

    在这里插入图片描述

aspect-ratio

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

    在这里插入图片描述

  2. 使用如下：

    <!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>

  3. 效果如图：

    在这里插入图片描述

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

    在这里插入图片描述

显示所有内容
上一篇 Linux 命令tail
下一篇 【2024.01.02】刷算法07

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。