CSS – Aspect Ratio
参考:
Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features!
W3Schools – How TO - Aspect Ratio
深入前端之replaced element (W3C 一直讲到 replaced element 等, 它指的就是 img, svg 那些, 因为它们也有 aspect-ratio 概念)
前言
Material Design 鼓励使用 aspect ratio 来达到排版的一致性.
但要在 CSS 实现 aspect ratio 其实挺难的. 至少在 CSS4 之前是比较麻烦的.
CSS4 aspect-ratio
<div class="box"></div>
自动 height
.box {
background-color: rgba($color: red, $alpha: 0.2);
width: 160px; /* height auto become 90px */
aspect-ratio: 16 / 9;
}
自动 width
.box {
background-color: rgba($color: red, $alpha: 0.2);
height: 90px; /* width auto become 160px */
aspect-ratio: 16 / 9;
}
CSS4 只要一个属性 aspect-ratio 就可以了. 但是它的支持率不是很好.
几个月前 Safari 才支持. (此刻是 23-02-2022), 但也不用担心. 因为 Safari 用户通常会升级. 我们只关心第几代 iPhone 能升级就好了.
2015 年 release 的 iPhone 6s 都能升级到 iOS 15.5, 所以不用担心兼容的问题.
Before CSS4 Workaround
在古代就没有这个需求吗? 其实少. 经常看到 aspect ratio 都是图片. 而图片不需要 CSS 的帮助就有 aspect ratio 了.
<img> 默认 width, height 是图片原本的大小, 如果设置其中 1 边, 那么它就会按原来的比例缩小. 所以保留了图片的 aspect ratio.
<div> 要实现 aspect ratio 就有一些手法.
参考: W3Schools – How TO - Aspect Ratio
效果
HTML 结构
<div class="container">
<div class="box"></div>
</div>
CSS style
.container {
width: 400px;
}
.box {
padding-top: calc(9 / 16 * 100%); /* 4:3 比例就写成 3/4 反写就对了 */
background-color: rgba($color: red, $alpha: 0.2);
}
关键就是用 padding-top 来控制高度 (注: 它用了 2 个 layer 哦 container + box, CCS4 就只需要 1 个元素就可以直接实现了)
为什么 padding-top + percentage 会有这个效果呢?
原来 padding + percentage 就会对标 containing block 的 width. 也就是 parent width. 所以比例就算出来了.
这个 workaround 并不全面, 他只能依赖 container 的 width, 而且如果 div 里面有内容的话会更难做.
强制图片 Aspect Ratio
需求是, 有一张图是 16:9 的, 但是希望它呈现在一个 1:1 的框内.
CCS4
<img src="./images/tifa2.PNG" />
CSS Style
img {
width: 250px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
效果
Workaround padding-top
<div class="container">
<div class="frame">
<img src="./images/tifa2.PNG" />
</div>
</div>
container + frame 用来做 aspect ratio
img 算是 frame 的内容, 所以需要定位哦. 因为整个 frame 是靠 padding 来撑高维持 ratio 的
.container {
width: 250px;
.frame {
padding-top: calc(1 / 1 * 100%);
position: relative;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: bottom;
}
}
}
题外话: 强制压缩图片比例 (object-fix: cover), 对 SEO 不友好 (lighthouse 会扣分的). 合理的做法是不要改变它的比例, 或者直接让 user crop 多一张图来 for 这个 page 的 design (总之要刚刚好 dimension).
当 aspect-ratio 遇上 Flex
<div class="flex-container">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
item2 用来撑高, item1 stretch 和 item2 一样高. 然后 item1 依据 aspect ratio 自动计算 width.
.flex-container {
background-color: rgba($color: red, $alpha: 0.2);
width: 800px;
display: flex;
align-items: stretch;
}
.item1 {
aspect-ratio: 16 / 9;
background-color: rgba($color: blue, $alpha: 0.2);
}
.item2 {
height: 150px;
background-color: rgba($color: blue, $alpha: 0.2);
}
效果
不管用, item1 没有保持 16:9.
为什么呢? 参考: MDN – Effects of Preferred Aspect Ratio on Automatic Sizes
如果我没有理解错的话, 应该是说不能 2 个都是自动的. item1 的 height 算是一个 auto height 了, 所以 width 就无效了. 这同样适用于 <img> 哦 (我就是遇到 img 的 aspect ratio 在 Flex 不起作用才研究 aspect-ratio 的)
注: 这里的 auto height 通常指的是 hug content 这种, 而不是简单的 percentage. 多试试就明白了.
冷知识: aspect-ratio & overflow
<body>
<div class="container">
<p>
</p>
</div>
</body>
CSS Style
.container {
margin-top: 4rem;
margin-inline: auto;
width: 200px;
aspect-ratio: 16 / 9;
border: 4px solid red;
font-size: 1rem;
// overflow-y: hidden;
}
效果
比例是正确的, 但当内容超过 height 以后
第一是它真实的效果, 比例跑掉了, 它类似 height: auto
第二是预想中的效果, 比例依然是对的, 它类似 height: 112.5px
第三是加上 overflow: hidden 后的效果.
所以要记得哦, aspect-ratio 并不是说它帮你计算好了 set height: 112.5px. 有点反直觉
CSS – Aspect Ratio的更多相关文章
- Maintain Aspect Ratio Mixin
Maintain Aspect Ratio Mixin Maintain the aspect ratio of a div with CSS RESPONSIVE ASPECT RATIOS WIT ...
- [CSS] Control Image Aspect Ratio Using CSS
Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new ...
- 利用ImageOps调整图片的Aspect Ratio（给图片添加borders）
# -*- coding: utf-8 -*- #******************** # 改变图片的纵横比(aspect retio) # 使用ImageOps.expand() # Image ...
- 【转】Styling And Animating SVGs With CSS
原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...
- CSS小记
1.元素居中 (1)水平居中:指定宽度,然后margin auto 即可 .middle{ max-width:400px; //width:400px;//当浏览器被缩小,宽度小于元素宽度时,元素会 ...
- pure.css
注释中address是纠正的意思 等价于correct/*! Pure v0.5.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed ...
- 【翻译】基于web创建逼真的3D图形 | CSS技巧
个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.htm ...
- css 初级进阶
摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...
- 使用css保持一定宽高比例
需求描述:移动端实现横跨页面半圆.(类似问题,实现4x4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块. 需要解决问题: 1,高度和宽度按照一定比例. 2,外容器高度和宽度不 ...
- CSS 利用 `padding-bottom` 实现固定比例的容器
复用 padding-bottom 可实现一块区域在窗口尺寸变化使始终保持自适应.对于响应式布局中的图片或视频来说比较有用. <div style="width: 100%; posi ...
随机推荐
- QCon 回顾 | Data Fabric：逻辑统一、物理分散
Data Fabric(数据编织),自 2019 年开始就在 Gartner 年度技术趋势榜单上安家,并在 2022 年被列为数据分析领域十大技术趋势之首,它究竟有哪些价值?又如何在企业落地? 在近日 ...
- LeViT：Facebook提出推理优化的混合ViT主干网络 | ICCV 2021
论文提出了用于快速图像分类推理的混合神经网络LeVIT,在不同的硬件平台上进行不同的效率衡量标准的测试.总体而言,LeViT在速度/准确性权衡方面明显优于现有的卷积神经网络和ViT,比如在80%的Im ...
- UE4 WebUI使用指南2-通信
前面一篇WebUI的文章讲述的WebUI插件的下载,开启,在UE中创建,加载网页等. 本文继续讲述通过WebUI,UE和网页实现双向通信的实现思路. 一点说明 由于WebUI 使用的浏览器内核并不是最 ...
- PHP7新特性之类型声明
今天我在这里总结下PHP7主要的新特性. 1.类型声明 做过php开发的小伙伴们都知道,php7以前的版本变量是不需要声明类型的,函数返回值也是不需要声明类型的,总之,在我们的脑海中就没有这么回事.可 ...
- WPF/C#：实现导航功能
前言 在WPF中使用导航功能可以使用Frame控件,这是比较基础的一种方法.前几天分享了wpfui中NavigationView的基本用法,但是如果真正在项目中使用起来,基础的用法是无法满足的.今天通 ...
- RHCA rh442 002 监控工具 脏页 块设备名 缓存
sar 看某一个时间的数据 sar -d 1 5 与iostat类似 计算机识别设备按编号识别 0-15预留出 8 为iscsi设备 做一个块设备名 名字不重要是给人看的,重要的是编号 8 17(主编 ...
- 【Vue】el-table 简易表格可筛选列
需求实现: 代码逻辑: 按钮控件: <el-popover placement="top-start"> <el-checkbox-group v-model=& ...
- 【H5】02 <head>头标签介绍
摘自: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HT ...
- 【Hibernate】Re08 加载策略配置
一.关联查询的问题: 使用关联查询,例如简单的一对多关系查询,查出一个部门对象和对应的N个员工对象. 如果一般情况下,我们只是需要部门对象,并不关系关联的员工对象,那么Hibernate关联查询出来的 ...
- 家中局域网搭建nas后的一些体验 —— NAS的速率究竟如何计算
NAS局域网,使用的路由器的有线端口为1000Mbps,无线WiFi速率860Mbps,不过由于不知道是不是因为电脑WiFi接收器型号老旧还是路由器WiFi协议或天线老旧(电脑和路由器均不支持WiFi ...