AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

新的 CSS 属性：aspect-ratio 为元素设置宽高比

2023-05-18 78
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 新的 CSS 属性：aspect-ratio 为元素设置宽高比 
.img_container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

用于防止图片加载后对页面布局的影响，亦可用于媒体查询

fe8c9dfcb1593b26f7c3c0fa968468c6.png

文章标签：
前端开发
关键词：
CSS元素
CSS设置
CSS属性
CSS宽高比
CSS宽高
游客5iyiu2o7vjvko
目录
相关文章
孙飞i
|
8天前
|
前端开发
了解 css中 backface-visibility 属性
了解 css中 backface-visibility 属性
孙飞i
15 0
热爱技术的小郑
|
5天前
|
前端开发
HTML+CSS基础知识（6）背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集，并通过代码示例和测试结果展示了具体的实现方法和效果。
热爱技术的小郑
11 1
HTML+CSS基础知识（6）背景的设置、表格的设计、表单的设计和框架集
孙飞i
|
9天前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果，包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如，使用`blur(10px)`可使图像产生模糊效果，包裹层设置`overflow: hidden`可避免边缘模糊；`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度；`grayscale(1)`将图像转为灰度；`invert(1)`实现图像颜色完全反转；`opacity(0.5)`调整图像半透明；`saturate(350%)`增加饱和度；`sepia(100%)`营造复古深褐色调；`hue-rotate(180deg)`改变
孙飞i
18 4
CSS常用滤镜属性讲解
孙飞i
|
9天前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性，用于3D转换时控制元素背面的可见性，以优化渲染性能。默认情况下，背面被隐藏以减少不必要的渲染。此属性有两值：`visible` 表示背面可见；`hidden`（默认值）则隐藏背面。 通过双面卡片案例演示了其用法：两个重叠盒子，一个显示图片，另一个显示文字且初始状态为背面朝外。鼠标悬停时，图片盒子翻转显示背面，文字盒子翻转显示正面，同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好，广泛支持现代浏览器。
孙飞i
20 2
了解 css中 backface-visibility 属性
Yaiba123
|
5天前
|
前端开发
CSS - 使用 clip-path 轻松实现正六边形块状元素
如何使用CSS的`clip-path`属性来创建正六边形的块状元素。文章提供了详细的HTML和CSS代码示例，展示了如何实现六边形的布局和样式，并通过CSS动画增强了视觉效果。最终效果是一个包含文本的可交互的正六边形元素，当鼠标悬停时会改变颜色。
Yaiba123
16 0
CSS - 使用 clip-path 轻松实现正六边形块状元素
游客zi3qmblbcdexu
|
11天前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
游客zi3qmblbcdexu
25 5
白如意i
|
6天前
|
前端开发 UED 开发者
使用 CSS 的 line-height 属性来提高可读性
使用 CSS 的 line-height 属性来提高可读性
白如意i
6 0
孙飞i
|
8天前
|
前端开发
CSS常用滤镜属性讲解
CSS常用滤镜属性讲解
孙飞i
17 0
孙飞i
|
1月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性，用于定义元素显示区域的裁剪形状，如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画，可创建动态交互效果。例如，`clip-path: circle(radius at center);`用于创建圆形裁剪，`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐：bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)，提供交互式工具测试不同形状。
孙飞i
39 0
学习css的clip-path属性
孙飞i
|
7天前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
孙飞i
29 4

热门文章

最新文章

  • 1
    web前端css定位position和起浮float
  • 2
    把CSS预编译器改成SASS
  • 3
    前端学习笔记（7）css选择器（一）
  • 4
    动态背景的CSS3登录表单
  • 5
    css优先级计算规则
  • 6
    CSS 有关Position = absolute (绝对定位 是相对于谁而言)
  • 7
    css选择器的优先级
  • 8
    关于css,js放置位置的问题
  • 9
    meego中css主题文件的使用方法
  • 10
    css3 多行文本 溢出 省略号
  • 1
    【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
    71
  • 2
    【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
    59
  • 3
    【专栏：HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
    60
  • 4
    【专栏：HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
    57
  • 5
    【专栏：HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
    288
  • 6
    【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
    398
  • 7
    【专栏：HTML与CSS实战项目篇】制作一个响应式图片画廊
    72
  • 8
    【专栏：HTML 与 CSS 实战项目篇】构建一个企业级网站：HTML 与 CSS 实战
    179
  • 9
    【专栏：HTML与CSS移动端开发篇】移动端网页性能优化策略
    66
  • 10
    【专栏：HTML与CSS移动端开发篇】移动端触摸事件与手势识别
    139

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    通义千问API入门教程