css中aspect,CSS属性之aspect-ratio
根据最新的浏览器chrom88 稳定版发布的信息看到,已经完全支持aspect-ratio了,那我们就来实践一下以及了解它的应用场景。
1. 了解下aspect ratio
aspect ratio翻译为中文就是宽高比(也称:纵横比)即x:y。我们日常生活中常见的宽高比由4:3和16:9。如图:
x:y = 4:3
为什么会有这个属性呢?
因为,一般情况下只有某些替换的元素具有长宽比,尤其是图像。对于它们,如果仅指定宽度和高度之一,则可以使用固有长宽比从中计算出另一个。然而对于大多数元素是不具有此性质的,此属性允许为任何其他元素显式指定长宽比,以获得相似的行为。随着科技的发展,对于我们web人员的来说,保持宽高比越来越重要,尤其当元素尺寸需要我们同时适配不同设备时。
2、之前的解决方案:padding-top
在chrome88之前不支持aspect-ratio的时候,主要的方案是使用padding-top或者padding-bottom来解决。
讲述padding-top之前,我们引个面试题问一下:请思考使用一个div实现width为200px, height为0的的正方形?
width: 200px;
height: 0;
???
复制代码
很多面试来的同学都会直接说padding-top: 100%或者padding-bottom: 100%; 那么就错了,表现如下:
为什么呢?因为大家忘了一个概念:padding-top的百分比是基于父元素的width来计算的。
故:padding-top: 200px;
或者思考一下:请使用一个div实现一个自适应的正方形?至于答案是什么,可以自己查一查相关内容。
此方案也被称为“ Padding-Top Hack”。该解决方案需要一个父容器和一个绝对放置的子容器。然后,可以将宽高比计算为百分比以设置为padding-top。例如:
1:1长宽比= 1/1 = 1 = padding-top: 100%
4:3长宽比= 3/4 = 0.75 = padding-top: 75%
3:2长宽比= 2/3 = 0.66666 = padding-top: 66.67%
16:9长宽比= 9/16 = 0.5625 = padding-top: 56.25%
现在,我们已经确定了宽高比值,可以将其应用于父容器。考虑以下示例:
.container {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
复制代码
3、使用aspect-ratio
不幸的是使用padding-top来计算宽高比显得不够直观。并且需要一些额外的开销和定位。有了新的aspect-ratio 属性,用于保持纵横比就更加清晰了。
在此我们将padding-top:100%改为aspect-ratio: 1/1来设置width/height的比率
.container {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px 4px 0 0;
overflow: hidden;
}
.media {
/* position: absolute;
top: 0; */
}
复制代码
此新属性还增加了将长宽比设置为auto的功能,其中“具有固有长宽比的可替换元素将使用该长宽比;否则,该框没有首选的长宽比”。如果同时指定了auto和,则优选的宽高比是指定的宽度与高度之比,除非它是具有固有长宽比的可替换元素,在这种情况下,将使用长宽比。
例1: 保持网格一致性
这对于CSS布局机制(例如CSS Grid和Flexbox)也非常有效。考虑一个列表,其中你需要保持1:1纵横比的子级,例如:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.subgrid img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
复制代码
例2:防止布局偏移
使用aspect-ratio属性,它可以创建一个占位符空间,以此来防止布局偏移,从而获得更好的性能。
例3:对可替换元素设置指定的宽和高,通过将现有尺寸转换为优选的纵横比,为它赋予首选的长宽比,还会为它提供自然的高度或宽度。
img { width: 100%; }
复制代码
同理:iframe上设置width和height来获得和图像类似的宽高比,如:
@supports (aspect-ratio: attr(width number) / 1) {
iframe {
aspect-ratio: attr(width number) / attr(height number);
width: 100%; height: auto;
}
}
复制代码
总而言之。借助新的aspect-ratioCSS属性,可以在多种现代浏览器使媒体或布局容器中保持适当的宽高比变得更加简单。
注:图片来源于网络
参考资料:
css中aspect,CSS属性之aspect-ratio相关推荐
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
- html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码 在此处显示文字 效果 ...
- CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
- html页边距为负值,css中的padding属性可以为负值吗?css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧 首先我们介绍的是第一个问题 ...
- 【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
- html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性 语法: zoom:normal ...
- c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线?(代码示例)...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- html dom style pointer-events,如何在CSS中使用pointer-events属性
如何在CSS中使用pointer-events属性 发布时间:2021-03-26 17:02:35 来源:亿速云 阅读:57 作者:Leah 今天就跟大家聊聊有关如何在CSS中使用pointer-e ...
最新文章
- h5执行php函数,值得一个的5个强大的HTML5API 函数
- 阿里平头哥首款AI芯片发布!46倍于英伟达P4,刷新全球推理性能最高纪录
- Java Se:自定义ClassLoader
- 使用DOSBox编译汇编代码
- pve远程连接 spcie_proxmox折腾 篇一:解决j3455直通iommu分组问题,PVE内核编译教程...
- flash读取程序 msp430_MSP430单片机对片内FLASH的读写操作程序范例
- 三个对CS最大的谬误
- Linux(CentOS 5.4 Linux)服务器配置之DHCP服务器配置应用
- Marching Cubes
- 企业如何开展数据可视化建设
- c语言答案知码,C语言笔试习题集答案和解析.doc
- 一阶线性微分方程的初等积分法例题
- MyBatis使用Map
- htc328d屏幕排线怎么换_HTC T328D解锁详细图文教程
- 关于输入阻抗和输出阻抗的理解
- 刷排名优优软件_刷网站排名软件
- linux 解决内存不足问题(设置虚拟内存)
- LaTeX模板——英文写作
- 360浏览器自动填充表单
- Spark性能优化之-资源调优
热门文章
- lol8月21号服务器维护,lol维护到几点今天?英雄联盟LOL8月21日维护更新内容
- S-CMS企业建站系统
- 涨知识了,您想知道的光纤常识都在这里了,太详细了,赶紧收藏吧
- HTML 超文本标记语言
- @【 ENVI】“应用程序无法正常启动0x0000007b”问题
- Java文件拒绝访问问题
- 在自己的网站上实现QQ授权登录
- #define private public
- 兴义智力象机器人_中科院科普讲师专家赴黔西南州做科普报告巡讲
- jdbc mysql url写法_详解数据库连接的URL的写法及总结