【CSS】css 怎样实现固定宽高比

泉缘泉 · 2024-9-24 15:48:45

本日和同事讨论这个题目，一时间还想不到了，于是学习了下，就顺便当个记录吧
要在CSS中实现固定宽高比，有两种主要的方法可以选择。一种是利用新的aspect-ratio属性，另一种是利用padding技巧。随着当代浏览器对aspect-ratio属性的广泛支持，直接利用该属性已成为实现固定宽高比的首选方法。
利用 aspect-ratio 属性

aspect-ratio属性允许你界说元素盒子的宽高比，纵然父容器或视口巨细发生变化，浏览器也会调整元素的尺寸以保持指定的宽高比。至少必要一个盒子的尺寸是主动的，才能让aspect-ratio生效。如果宽度和高度都不是主动尺寸，那么提供的宽高比就不会影响盒子的首选尺寸。
以下是一个利用aspect-ratio属性的示例，它创建了一个具有16:9宽高比的元素：

.aspect-ratio-16-9 {
aspect-ratio: 16 / 9;
width: 100%; /* 或者任何你想要的宽度 */
background-color: lightblue;
}

复制代码

<div class="aspect-ratio-16-9"></div>

复制代码

利用 padding-top 百分比技巧

对于不支持aspect-ratio属性的旧浏览器，你还可以利用padding技巧来维持元素的宽高比。这种方法基于元素的宽度百分比和其顶部填充百分比之间的关系。

以下是一个利用padding-top技巧的示例，它创建了一个宽高比为1:1的元素：

.aspect-ratio-1-1 {
position: relative;
width: 100%; /* 或者任何你想要的宽度 */
padding-top: 100%; /* 高度等于宽度 */
background-color: lightblue;
}

复制代码

<div class="aspect-ratio-1-1"></div>

复制代码

这种方法的一个缺点是它依赖于元素的宽度，因此如果元素的宽度改变，宽高比也会改变。但是，对于大多数响应式计划来说，这种方法仍旧非常有用。
好比你想要创建一个宽高比为16:9的div，你可以通过设置padding-top的百分比值来实现。这个百分比值是基于div的宽度计算的，因此要得到16:9的宽高比，你必要将padding-top设置为9 / 16 * 100%，即56.25%。

<!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>
.container {
position: relative;
width: 100%;
padding-top: 56.25%;
/* aspect-ratio: 16 / 9; */
background-color: red;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
text-align: center;
line-height: 200px; /* Adjust based on your needs */
font-size: 24px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="content">Content Here</div>
</div>
</body>
</html>

复制代码

总结

总结起来，利用aspect-ratio属性是实现固定宽高比的当代方法，因为它直接控制元素的宽高比，不受元素宽度的影响。而padding-top技巧则是一种兼容性更好的办理方案，适用于那些不支持aspect-ratio属性的旧浏览器。
参考

aspect-ratio - CSS：层叠样式表 | MDN

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【CSS】css 怎样实现固定宽高比

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块