宽高比，指的是宽度除以它的高度所得到的比例，通常表示为x:y或x×y，其中的冒号和叉号表示中文的“比”之意。简单点讲，就是根据容器的宽度，按照宽高比例自动计算出容器的大小。并且让图片，视频之类能自适应容器。
css3怎样设置宽高等比？
基于宽度的百分比
方案是基于容器width给padding一个百分比。这也是最早的一个方案。主要的原理是基于元素的padding-top或padding-bottom是根据元素的width进行计算的。假设你有一个div容器，它的宽度是500px，你想让其高度也是和宽度一样，也就是说宽高比例是1:1。这个时候借助padding-top或者padding-bottom的值为100%，就可以计算出容器div的高度是500px。
这种方案有一个必要条件，容器div的height为0，同时box-sizing为border-box，不然的话，容器不能带有border。现在我们可以想象一下，如果容器div的宽度又是一个百分比值，这样一来就可以保持容器高度跟宽度始一致。另外再想象一下，如果我们的padding-bottom或padding-top不是100%，而是56.25%，其实这就是一个完美的宽高比16:9，也就是9 / 16 * 100% = 56.25%。如此一来，你可以根据你自己的设计比来进行调整。
而这样的场景仅适合容器中放置背景图片：
.aspect-ratio-boxes{
overflow: hidden;
height: 0;
padding-top: 56.25%;
background: url(/images/happy-birthday.svg);
}注：如果背景图片不是SVG文件，那还需借助于background-size或者object-fit来处理。比如设置为cover这样的值。
回到我们的问题中来，很多时候，我们的图片比例并不是和容器比例一样，比如在这个示例中，有可能不是16:9。就算是一个SVG，假设这个SVG的viewBox = "0 0 1127.34 591.44"，这也意味着它本质上是一个1127.34×591.44图像，它的比例是1127.34:591.44。或者说它也有可能是一个328×791的图形。
我想这种现象应该是很常见的，一个随机图像不一定符合预期的长宽比。那么问题就来了，对于一个任何长宽比，我们将如何实现？
更多web前端开发知识，请查阅 HTML中文网 ！！
