[老法新用]使用padding-top:(percentage)实现响应式背景图片

处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的  <img> 元素,其高度会随着宽度的变化自动调整,且其宽高比不变。如果想在背景图片中实现同样的效果,我们必须先解决如何保持HTML元素的宽高比。

固定宽高比

我们将用到一个保持元素宽高比的技巧:为元素添加垂直方向的padding值,padding值使用百分比。这是因为垂直方向的padding取值使用百分比时,其值是相对于包含块的宽度而定的[参考Box model]。这个技巧最早在Creating Intrinsic Ratios for Video一文中用来创建固有比率的视频,查看demo

假设我们有一张800*450px的图片,我们需要创建一个元素在其宽度变化时,它的宽高比仍保持16:9。代码如下:

<div class="column">
  <div class="figure"></div>
</div>
.column{
  max-width: 800px;
}
.figure{
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}

 自己动手试试吧

添加背景图片

上面我们实现了元素缩放并保持宽高比。但是此时如果我们添加了背景图片,它并不能跟随元素一起自动缩放。还需要添加background-size:cover。使用这个属性让背景铺满元素的缺点是IE8及以下浏览器不支持,为了使IE下的效果可以接受,可以使用background-position将背景图片居中显式。我们必须要保证图片的宽度至少要与元素的max-width一样大。这样的话元素的宽度永远不会比图片大,如果元素小于图片时,图片将被裁剪。

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

再动手试试吧

流动宽高比

我们可以更深入一步。假设我们有一张在桌面浏览器下显式很好的宽屏图片,在移动设备上我们不想使用相同的宽高比,要不然图片会很小。又或者是我们不想使用相同的高度,因为图片可能会过高。

这个效果可以通过较少padding的百分比值和为元素设置一个高度来实现。假设我们的大图是800*200px,我们打算在元素的宽度减少到300px的时候,背景图片的高度为150px。现在我们计算下height和padding-top属性值。

上图显式了两个尺寸的关系。坡度线(slop)对应于padding-top属性,开始高度(start height)对应于height属性,它表示元素在宽度为零时的高度。调整样式如下:

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}
figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

动手试试吧

REF:

  1. Responsive background images with fixed or fluid aspect ratios
  2. Creating Intrinsic Ratios for Video

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法channel

Python-GUI|Label显示图片,Pack布局控件

01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

5196
来自专栏mySoul

SVG基础知识 Adobe Illustrator绘制SVG

此外还有阴影渐变,等滤镜,等就太复杂了,设计到矩阵变换等高等数学的内容,自己有心无力。

1235
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

2816
来自专栏WindCoder

Ps中懵懂斋老师的抽线方法

首先,打开要抽线的图片(Ctrl+O),复制图层(Ctrl+J)。抽线效果一般不需要保留色彩。使用图像>调整>去色(Shift+Ctrl+U),然后再复制一个图...

1251
来自专栏一个爱吃西瓜的程序员

用Python画一只丑丑的猪头

前两天在知乎上看到有人用Python的turtle库画了一只小猪佩奇,接着就有网友用turtle画了一只哆啦A梦,不得不说他们都是人才,画得有模有样的。知乎地址...

2772
来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

1804
来自专栏AzMark

Matplotlib 系列之「绘制函数图像」

matplotlib 是 python 最著名的绘图库,它提供了一整套和 matlab 相似的命令 API,十分适合交互式进行绘图。

1132
来自专栏我和PYTHON有个约会

ionic中的$inoicModal

在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】

782
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

5340
来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

作者:汪娇娇 时间:2017年9月5日 单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么...

3238

扫码关注云+社区