前端设计小技巧
收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段等
提示
由于浏览器未必能支持新特性，使用前请到 Caniuse 相关网站查询不同浏览器对该特性的适用性。
高宽比 aspect-ratio
CSS 属性 aspect-ratio 为容器规定了一个期待的纵横比，例如对于使用 <iframe> 标签插入的视频播放器，可以将元素的纵横比设置为 16:9 这是主流的在桌面播放的视频的高宽比例。
html
<iframe style="width: 100%;aspect-ratio: 16/9;" src="https://www.youtube.com/embed/Y50_RSWpWkA?start=3403&end=3441&modestbranding=1&rel=0" allowfullscreen></iframe>
适应容器 object-fit
CSS 属性 object-fit 用于指定可替换元素如何适应到其（高度和宽度确定的）父元素。属性可选值有 5 种：
fill元素完全填充满容器，可能被拉伸以适应内容框。cover元素在保持其宽高比的同时填充满容器，可能被剪裁以适应内容框contain确保元素完整地包含在容器内，保持其宽高比，因此可能不会填满容器。none元素将保持其原有的尺寸。scale-down元素的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
Tip
可替换元素的内容不受当前文档的样式的影响，CSS 只影响它的位置，典型的可替换元素有：
<iframe><video><embed><img>
例如设置图片适应容器的方式为：保存完整内容和高宽比
css
img {
object-fit: contain;
}
Tip
可以使用 CSS 属性 object-position 规定可替换元素在其内容框中的位置，使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用（相对于容器）相对或绝对偏移。
Tip
类似的属性是 background-size 和 background-position 但是它们只适用于设置背景图，而不是可替换元素。