CSS固定宽高比的方法

发布时间：2023-12-18 04:56:07 所属栏目：语言来源：DaWei

导读： 这篇文章我们来了解CSS固定宽高比的相关内容，这个问题在一些面试场合可能会有，看似简单，其实还有一些学问在的下文有很详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一

这篇文章我们来了解CSS固定宽高比的相关内容，这个问题在一些面试场合可能会有，看似简单，其实还有一些学问在的下文有很详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

今天小编就和大家一起看看上面几种情况。首先，元素尺寸已知，这个 pass 掉。我们重点讨论元素尺寸未知的情况。所以本文主要分为可替换元素和普通元素如何实现固定宽高比。

一、可替换元素实现固定宽高比

可替换元素(如 <img> 、 <video> )和其他元素不同，它们本身有像素宽度和高度的概念。所以如果想实现这一类元素固定宽高比，就比较简单。

我们可以指定其宽度或者高度值，另一边自动计算就可以了。

我们固定图片元素的宽度，高度自适应：

<div class="img-wrapper">
<img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>
.img-wrapper {
width: 50vw;
margin: 100px auto;
padding: 10px;
border: 5px solid lightsalmon;
font-size: 0;
}
img {
width: 100%;
height: auto;
}

你可能没注意到，我们给 img 元素设定了 height: auto; ，这是为了避免开发者或者内容管理系统在 HTML 源码中给图片添加了 height 属性，通过这个方式可以覆盖掉，避免出现 bug。

二、普通元素实现固定宽高比

虽然我们上面实现了可替换元素的固定宽高比，但是这个比例主要是因为可替换元素本身有尺寸，而且这个比例还会受到原有尺寸比例的限制。显然，这并不灵活，那我们该如何针对普通元素实现固定宽高比呢。

首先我们来看看最经典的 padding-bottom/padding-top 的 hack 方式。

2.1 padding-bottom 实现普通元素固定宽高比

通过借助 padding-bottom 我们就可以实现一个宽高比例固定的元素，以 div 为例。

HTML:
<div class="wrapper">
<div class="intrinsic-aspect-ratio-container"></div>
</div>

CSS:
.wrapper {
width: 40vw;
}
.intrinsic-aspect-ratio-container {
width: 100%;
height: 0;
padding: 0;
padding-bottom: 75%;
margin: 50px;
background-color: lightsalmon;
}

如上代码，我们将 div 元素的高度设为了 0 ，通过 padding-bottom 来撑开盒子的高度，实现了 4/3 的固定宽高比。

这样是实现了固定宽高比，但其只是一个徒有其表的空盒子，里面没有内容。如果想在里面放入内容，我们还需要将 div`内部的内容使用绝对定位来充满固定尺寸的容器元素。

如下：
.intrinsic-aspect-ratio {
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;
}
通过这种方式我们就可以实现一个可以填充内容的固定尺寸的容器了。

如果是可替换元素 <img> 或 <video> ，可以将 width / height 其一设定尺寸，另一个设为 auto ，则可替换元素会根据其固有尺寸进行变化。

如果是普通的元素，我们可以通过 padding-top / padding-bottom 的方式来模拟固定宽高比，不过这种方式不灵活，只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案 aspect-ratio ，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

关于CSS固定宽高比的内容就介绍到这，本文有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多CSS的使用，内容，大家可以关注其它的相关文章。

（编辑：湘西站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!