首页 前端知识 css 设置图片的等比例宽高比

css 设置图片的等比例宽高比

2024-01-25 10:01:23 前端知识 前端哥 238 246 我要收藏

Aspect ratio

长宽比最常见的表示方式是两个整数和一个冒号,尺寸为:宽:高,或x:y。摄影最常见的长宽比是4:3和3:2,而视频和最近的消费类相机则倾向于16:9的长宽比。

aspect-ratio CSS 媒体属性 可以用来测试 viewport 的宽高比。

语法

宽高比属性被指定为<ratio>值来代表 viewport 的宽高比。其为一个范围,这意味着你可以使用 min-aspect-ratio 和 max-aspect-ratio 分别查询最小和最大的值。

示例

HTML

<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>
/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* 明确的宽高比,放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

常用换算

1:1 aspect ratio = 1 / 1 = 1 = `padding-top: 100%` 4:3 aspect ratio = 3 / 4 = 0.75 = `padding-top: 75%` 3:2 aspect ratio = 2 / 3 = 0.66666 = `padding-top: 66.67%` 16:9 aspect ratio = 9 / 16 = 0.5625 = `padding-top: 56.25%`

使用aspect-ratio的好处是:

  1. 不需要在套一层div,只需要指定高度/宽度的值就可以。
  2. 可以指定高度具体的值,而使用padding-top/bottom咋无法指定高度的值。
  3. 你也可以不指定宽和高的值,此时是按照宽度来保持宽高比。

其实实现定宽高比的方案有很多,本文简单的介绍了三种,当然aspect-ratio应该是当之无愧的神,而且最简单的,适用场景最多的。随着兼容性好起来,aspect-ratio会逐渐取代其他方案。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/284.html
标签
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!