css媒体查询aspect-ratio宽高比在less中的使用

css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配   使用样例如下： // 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 docs/Web/Guide/CSS/Media_queries    媒体查询 http://www.zhangyunling.com/837.html   device-aspect-ratio与aspect-ratio

元素固定宽高比这么写太香了 - Chrome 支持 aspect-ratio 了

原文章的最后提到了 aspect-ratio 这种方式。不过当时还没有浏览器实现，现在标准以及实现都有了一些新的进展，这里再次跟大家同步下。 Edge 现在使用的是 Chrome 内核，所以也支持 aspect-ratio。 Firefox 从 81 版本之后也开始逐步支持 aspect-ratio 了。不过需要开启对应的配置才行。 aspect-ratio 可用于除行内盒子和table表格之外的元素，默认值为 auto，不支持继承，不支持百分比值xx%。 如果元素的宽高都不是auto时，则aspect-ratio 无效，也就是说宽高必须有一个值为 auto。 以上是aspect-ratio的基本用法讲解，下面我们看几个例子。

宝， 来学习一下CSS中的宽高比，让 h5 开发更想你的夜！

aspect-ratio 属性 今年早些时候，Chrome、Safari TP和Firefox Nightly都支持aspect-ratio CSS 属性。 .card { --aspect-ratio: 16/9; padding-top: calc((1 / (var(--aspect-ratio))) * 100%); } @supports (aspect-ratio: 1) { .card { aspect-ratio: var(--aspect-ratio); padding-top: initial; } } CSS aspect-ratio是这种使用情况的最佳选择。 .person { width: 180px; aspect-ratio: 1; } 如果宽高比的两个值相同，我们可以写成aspect-ratio: 1而不是aspect-ratio: 1/1。

CSS元素高度始终跟随宽度

使用 aspect-ratio 属性现代浏览器支持 aspect-ratio 属性，它允许你为元素设置宽高比（例如 1:1），这样元素的高度就会随着宽度的变化而自动调整。. element { width: 100%; aspect-ratio: 1; /* 高度始终等于宽度 */}aspect-ratio: 1 表示宽度和高度相等，也就是一个正方形。 注意：aspect-ratio 属性支持情况较新，因此请确认目标浏览器的支持情况。2. 兼容性考虑aspect-ratio 的浏览器支持较新，基本上已被现代浏览器支持，包括 Chrome、Firefox、Safari 等。 如果目标浏览器支持情况不明确，建议同时提供两种方法，使用 aspect-ratio 作为优先选择，padding-bottom 作为备选方案。

使用最简单的 CSS 代码来实现网页电影比例

使用aspect-ratio这个属性就可以，属性值是宽 / 高。 例如我有这样一张图片： 我要给图片的img标签设置比例为：2.35：1的比例，我可以这样写： aspect-ratio: 2.35 / 1; 以此类推，如需设置 16：9，我们写作： aspect-ratio : 16 / 9; css 完整代码如下： img { max-width: 100%; aspect-ratio: 2.35 / 1; object-fit > body { } img { max-width: 100%; background-color: pink; aspect-ratio

现代图片性能优化及体验优化指南 - 缩放精细化展示及避免布局偏移、拉伸

我们会介绍 4 个新的特性： aspect-ratio object-fit object-position image-rendering 使用 aspect-ratio 避免布局偏移 很多时候，只能使用固定尺寸大小的图片 当然，到今天，我们还可以使用 aspect-ratio 设定图片的高宽比。 aspect-ratio CSS 属性为容器规定了一个期待的宽高比，这个宽高比可以用来计算自动尺寸以及为其他布局函数服务。 ，因此，有了 aspect-ratio 之后，我们的写法就可以更佳的舒服。 ，使用 aspect-ratio: 3 / 2 就能非常好的适配这种情况。 当然，aspect-ratio 不仅仅只是能运用在这里，在 aspect-ratio 出现之前，我们只能通过一些其它的 Hack 方式，譬如设置 padding-top 等方式模拟固定的宽高比。

新时代布局中一些有意思的特性

版本中，有一些挺有意思的属性相继得到支持，本文就将介绍一下，在今天，新时代布局中，我们能逐渐去使用的一些有意思的新特性，通过本文，你将能了解到： flex 布局中的 gap 属性 控制容器宽高比属性 aspect-ratio 控制容器宽高比属性 aspect-ratio 保持元素容器一致的宽高比（称为长宽比）对于响应式 Web 设计和在某些布局当中至关重要。 现在，通过 Chromium 88 和 Firefox 87，我们有了一种更直接的方法来控制元素的宽高比 -- aspect-ratio。Can i use -- aspect-ratio ? 首先，我们只需要设定元素的宽，或者元素的高，再通过 aspect-ratio 属性，即可以控制元素的整体宽高：

min-aspect-ratio和max-aspect-ratio宽高比自适应

所以这里就要用的：device-aspect-ratio和aspect-ratio了。 一个一个的来说吧。 aspect-ratio aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率 可视区域，这个对于我们来说，才是真正需要的。 : 9/16) { // 如果宽高比是9:16的话，显示这个内容 } aspect-ratio的取值：width/height，即宽度与高度的对比 一般情况下，在PC端的是：width > height 如果直接设置：aspect-ratio:9/16，那么就表示，只要在width/height = 9/16的情况下，才会被触发，但是同一个手机，在APP和浏览器（甚至不同的浏览器），这个宽高比是不同的， 所以，如果你只是要监听一个比例的变化，而且，你需要使用到：max-aspect-ratio，min-aspect-ratio，aspect-ratio这三个属性的话，那么就要按照本小节的示例代码，把aspect-ratio

新提案，初识CSS的object-view-box属性

5个实用的CSS技巧

❞ image aspect ratio aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。 ❝CSS aspect-ratio属性可以明确元素的高宽比例，日后一定是一个高频使用的CSS属性。 现在有了aspect-ratio属性，开发者对于元素比例的控制就非常容易实现了。 目前Chrome 88已经支持了aspect-ratio属性，各大浏览器大规模支持只是时间问题，我的Chrome现在版本正好是88，可以体验效果了，于是赶快尝鲜，了解下相关的细节。 aspect-ratio的兼容性 padding实现图片等比例自适应 对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。

面试官：CSS如何实现固定宽高比？

W3C 的 CSS 工作组为了避免这一问题，已经在致力于实现这样一个属性aspect-ratio。 aspect-ratio的语法格式如下：aspect-ratio: <width-ratio>/<height-ratio>。 如下，我们可以将width或height设为auto，然后指定aspect-ratio。另一个值就会按照比例自动变化。 : 100%; width: auto; aspect-ratio: 16/9; } 这一技术可以很灵活的实现元素的固定宽高比，并且指定宽高之一均可。 CSS 工作组现在正在引入一种新的方案aspect-ratio，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

position-try-fallbacks

{ anchor-name: --my-anchor; /* 使用自定义的锚点名称 */ height: 80px; /* 高度设为80px */ aspect-ratio 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width: 80px; /* 宽度设为80px */ aspect-ratio { anchor-name: --my-anchor; /* 使用自定义的锚点名称 */ height: 80px; /* 高度设为80px */ aspect-ratio 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width: 80px; /* 宽度设为80px */ aspect-ratio

字节前端都知道的CSS包含块规则

通过思考，大致有如下的实现方式，大家可以参考 实现方法1: 利用Chrome浏览器最新支持的aspect-ratio属性，其问题就是C端浏览器兼容性不好 .box { aspect-ratio: 1/3; // width/height 宽高比 } aspect-ratio 实现方法2: 巧用包含块规则（padding和width属性百分比值的计算基数是包含块的宽度）+ 背景图实现 <div

2024年，你需要了解下这 12 个现代化 CSS 新属性

1、aspect-ratio 你是否曾为视频嵌入时的宽高比感到困扰？例如，我们常见的高清视频宽高比是16:9。 比如说，对于一个高清视频，你只需要设置aspect-ratio: 16/9就可以了。如果你想要一个完美的正方形，设置aspect-ratio: 1即可，因为默认情况下第二个值也是1。 来看一个例子： .aspect-ratio-hd { aspect-ratio: 16/9; } .aspect-ratio-square { aspect-ratio: 1; } 值得一提的是 ，应用了aspect-ratio属性的元素在某种程度上是“宽容”的。 在这两种情况下，object-fit与aspect-ratio结合使用是非常理想的，这可以确保在应用自定义宽高比时图片不会失真。

仅使用一个 DIV 配合 CSS 实现饼状图

.pie { --w: 150px; // --w -> --width width: var(--w); aspect-ratio: 1; // 纵横比，1 说明是正方形 display center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif; } 上面我们使用了 aspect-ratio class="pie" style="--p:60;--b:10px;--c:purple;">60%