css实现宽高按比例拉伸

场景

开发中等宽列表开发经常会使用flex进行宽度的自适应。但为了在大屏时不至于只变化宽度，UI提出需要列表每一项宽高自适应。

解决思路

这么简单的需求，肯定不考虑使用js来监听宽度拉伸设置高度，成本太高，所以优先考虑如何从css入手。
1.是否有属性直接设置宽高比？
2.是否有哪些属性是根据宽度而变化的？

解答方案

• 是否有属性直接设置宽高比？

答案是有的，这个属性是：aspect-ratio，MDN对于这个属性的解释是：

aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

我们可以直接使用这个属性设置每个item中的宽高比，用法：

// aspect-ratio: 设计图的宽高比例
aspect-ratio: 16 / 9

但这个属性是个新特性，在IE中并不支持，需要考虑其兼容性，所以不推荐。
下面是其兼容性截图：

• 是否有哪些属性是根据宽度而变化的？
  1.是我们使用的vw单位来设置高度，这个vw是根据视图宽度的比例，但开发中大部分是需要根据其父元素来设置宽高，所以并不适用。
  2.会根据宽度的变化改变的有padding的百分比值。很多人对padding上下的百分比误解是其父元素的高度，但其实不是，padding中的上下百分比是根据其自身宽度计算的。
  
  这个时候解决方法就清晰了。
  将其宽度设置成百分比自适应宽度，计算设计图中的宽高比，设置padding就可以得到根据宽度变化高度的盒子。
  例如：
  设计图中需要5个100*60的list横向布局，需要随着视图的变化而铺平屏幕，且每个元素宽高按比例拉伸。写法如下：

.item {
	// 100%/5 = 20%每块占20%
	width: 20%;
	// （60/100）*100 = 60% 即60/100计算出高度于宽度的比例
	// 可设置padding-top或者padding-bottom都行
	padding-top: 60%;
}

这里，我们就得到了按宽高等比变化的盒子。
另外，若我们需要在item里增加元素时，可设置item的position为relative，其内容用一个div包裹起来用position为absolute定位在其item之上来实现。
使用padding的百分比来解决这个问题是比较推荐的。

结语

纯css能解决很多问题，但需要我们熟知各种属性的特性，只有让我们在经验中成长，才能做到“遇题不慌”吧！
最近换了新环境，实在是太忙成为了一名加班厉害的新时代农民工，在需求中堆砌的代码都没空回顾，加班太多导致的问题就是遇到问题时脑袋一片浆糊，并不如精力充沛时思路清晰，不知是得是失。