容器长宽比

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

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

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

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

首先介绍的方案是基于容器widthpadding一个百分比。这也是最早的一个方案。主要的原理是基于元素的padding-toppadding-bottom是根据元素的width进行计算的。假设你有一个div容器,它的宽度是500px,你想让其高度也是和宽度一样,也就是说宽高比例是1:1。这个时候借助padding-top或者padding-bottom的值为100%,就可以计算出容器div的高度是500px

这种方案有一个必要条件,容器divheight0,同时box-sizingborder-box,不然的话,容器不能带有border。现在我们可以想象一下,如果容器div的宽度又是一个百分比值,这样一来就可以保持容器高度跟宽度始一致。另外再想象一下,如果我们的padding-bottompadding-top不是100%,而是56.25%,其实这就是一个完美的宽高比16:9,也就是9 / 16 * 100% = 56.25%。如此一来,你可以根据你自己的设计比来进行调整。

而这样的场景仅适合容器中放置背景图片:

<div class="aspect-ratio-boxes"></div>

.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,它是完美的,我们也无需头痛。但事实上,往往并不如此,总是充满了随机性,这样也就表示比例也是随机性的。如果我们无法掌握

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/aspect-ratio-boxes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部