参考:

Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features!

MDN – aspect-ratio

W3Schools – How TO - Aspect Ratio

W3C – Aspect Ratios

深入前端之replaced element (W3C 一直讲到 replaced element 等, 它指的就是 img, svg 那些, 因为它们也有 aspect-ratio 概念)

前言

Material Design 鼓励使用 aspect ratio 来达到排版的一致性.

但要在 CSS 实现 aspect ratio 其实挺难的. 至少在 CSS4 之前是比较麻烦的.

CSS4 aspect-ratio

参考: MDN – 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 会有这个效果呢?

参考: MDN – padding

原来 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的更多相关文章

  1. Maintain Aspect Ratio Mixin

    Maintain Aspect Ratio Mixin Maintain the aspect ratio of a div with CSS RESPONSIVE ASPECT RATIOS WIT ...

  2. [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 ...

  3. 利用ImageOps调整图片的Aspect Ratio（给图片添加borders）

    # -*- coding: utf-8 -*- #******************** # 改变图片的纵横比(aspect retio) # 使用ImageOps.expand() # Image ...

  4. 【转】Styling And Animating SVGs With CSS

    原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...

  5. CSS小记

    1.元素居中 (1)水平居中:指定宽度,然后margin auto 即可 .middle{ max-width:400px; //width:400px;//当浏览器被缩小,宽度小于元素宽度时,元素会 ...

  6. pure.css

    注释中address是纠正的意思  等价于correct/*! Pure v0.5.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed ...

  7. 【翻译】基于web创建逼真的3D图形 | CSS技巧

    个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.htm ...

  8. css 初级进阶

    摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...

  9. 使用css保持一定宽高比例

    需求描述:移动端实现横跨页面半圆.(类似问题,实现4x4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块. 需要解决问题: 1,高度和宽度按照一定比例. 2,外容器高度和宽度不 ...

  10. CSS 利用 `padding-bottom` 实现固定比例的容器

    复用 padding-bottom 可实现一块区域在窗口尺寸变化使始终保持自适应.对于响应式布局中的图片或视频来说比较有用. <div style="width: 100%; posi ...

随机推荐

  1. 人工智能时代，前端全栈成就独立开发工程师 next.js 开发实战

    next  可以服务端渲染,可以客户端渲染,让前端同事更有性价比,让我们做得可以更多 由于next.js 是基础于react 所以在正式学习next.js 之前我们了解一下react 什么叫模块 ,就 ...

  2. JDK安装教程（Windows）

    Windows 端: 1. 安装 首先进入官网:https://www.oracle.com/java/technologies/javase-downloads.html 因为我已经安装了 JDK8 ...

  3. 5、SpringBoot2之整合Durid

    创建名为springboot_druid的新module,过程参考3.1节 5.1.引入相关依赖 注意:虽然本文使用的是 spring boot 2.7.18 和 MySQL 5.7 ,但是出于可移植 ...

  4. 【Maxwell】02 Kafka配置

    一.快速搭建Kafka环境 基于Docker容器创建(供参考): https://www.cnblogs.com/mindzone/p/15608984.html 这里简要写一下命令: # 拉取zk ...

  5. 【MySQL】全库调整表大小写语句

    统一修改字段成小写+下划线的命名规则: V1上线后,重新看SQL调整的较可行的写法: # = = = = = = = = = = = = = = = 统一更改全库所有字段大小写脚本SQL(会删除字段原 ...

  6. 【Game】安装EA的Origin（烂橘子）平台太慢 解决办法

    情况是购买了Steam上的爹5,本体下载完成之后需要安装烂橘子平台 然后发现走官方提供下载的平台根本装不上来,安装贼慢 折腾什么配置文件,改HOST都是一些乱七八糟的操作,都没说清楚这干嘛用的 解决方 ...

  7. 【Hibernate】Re01.6 HQL

    一.支持的查询方式 Hibernate的查询支持三种方式: 1.HQL查询 2.Criteria查询 3.NativeSQL 原生SQL查询 二.HQL查询语言 全称 Hibernate Query ...

  8. 国产操作系统 deepin —— UOS 系统下使用蓝牙音箱或蓝牙耳机不能正常工作

    近日搞来了一个国产CPU的电脑,自带系统为UOS,具体可见: https://www.cnblogs.com/devilmaycry812839668/p/14828130.html 忽然发现这个系统 ...

  9. .NET 与 LayUI 实现高效敏捷开发框架

    前言 WaterCloud 是一个集成了 LayUI 的高效敏捷开发框架,专为 .NET 开发者设计. 它不仅支持多种 .NET 版本(.NET 4.5..NET Core 3.1..NET 5..N ...

  10. 聚焦OLAP性能提升，火山引擎ByteHouse发布六大场景解决方案

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群.   性能在数据分析中至关重要,它直接决定数据处理的效率与及时性,进一步对数据驱动的企业决策造成影响.   举个例 ...