TryCoding.FunTryCoding.Fun
  • 文章
  • 项目
  • 归档
  • 关于
搜索... ⌘K
Home Work Blog Projects
返回博客

CSS 固定宽高比

CSS 实现固定宽高比的多种方法,包括使用 `aspect-ratio` 属性和通过 padding-bottom 技巧实现。

全部 前端 (393) 运维 (77) 技术 (71) 后端 (25) 数据库 (10) 生活 (1)
2023年3月2日
Mt.r
|
#CSS

需求

css 实现固定宽高比

实现

aspect-ratio: 16/9;

其他方式

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>
.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

参考文章

  • 面试官:CSS 如何实现固定宽高比?
  • https://stackoverflow.com/questions/49901814/css-maintain-aspect-ratio-not-working
上一篇
Mac 使用 exiftool 删除图片元数据
学习如何在 Mac 系统上使用 exiftool 命令行工具删除图片中的元数据信息。
下一篇
CSS 相对居中
使用 CSS 实现元素相对居中的方法。

目录

  • 需求
  • 实现
  • 其他方式
  • 参考文章

分类

全部文章 577 前端 393 运维 77 技术 71 后端 25 数据库 10 生活 1

热门标签

#JavaScript #Vue #Linux #CSS #Go #CentOS #React #Nginx #Git #HTML #iOS #Mac #MySQL #Jenkins #TypeScript #Python #Docker #C #Webpack #数据库
Trycoding.fun
© 2025 版权所有 京ICP备19000129号-4
文章 项目 归档 关于 GitHub