css3怎样设置宽高等比?

宽高比,指的是宽度除以它的高度所得到的比例,通常表示为x:y或x×y,其中的冒号和叉号表示中文的“比”之意。简单点讲,就是根据容器的宽度,按照宽高比例自动计算出容器的大小。并且让图片,视频之类能自适应容器。

css3怎样设置宽高等比?

基于宽度的百分比

方案是基于容器widthpadding一个百分比。这也是最早的一个方案。主要的原理是基于元素的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%。如此一来,你可以根据你自己的设计比来进行调整。

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

<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的图形。

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

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css3怎样设置宽高等比?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏