html容器自定义宽高比,容器长宽比_aspect-ratio, 宽高比, 会员专栏 教程_W3cplus

容器长宽比，这个话题在站上也有相关的文章介绍，最早出现于Responsive Web Design中，主要用来处理img、iframe、video和object这些元素的自适应问题。简单点讲，就是根据容器的宽度，按照宽高比例自动计算出容器的大小。并且让图片，视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局，div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？”，其实解决方案在前面的教程已提到过：

既然有相应的解决方案，继续花时间来说，是不是有点多余。那么这个问题又回到了CSS的根源上：在Web中，使用CSS解决问题，往往不只有一种方案，只有更适合的方案。

这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章，里面有新的方案值得我们思考，特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起，仅供学习与参考。

方案一：基于宽度的百分比

首先介绍的方案是基于容器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的图形。

我想这种现象应该是很常见的，一个随机图像不一定符合预期的长宽比。那么问题就来了，对于一个任何长宽比，我们将如何实现？

任何可能的长宽比计算

对于固定的长宽比，比如16:9，它是完美的，我们也无需头痛。但事实上，往往并不如此，总是充满了随机性，这样也就表示比例也是随机性的。如果我们无法掌握