• 售前

  • 售后

热门帖子
入门百科

CSS百分比padding制作图片自适应布局

[复制链接]
贺老师 显示全部楼层 发表于 2021-8-16 11:32:15 |阅读模式 打印 上一主题 下一主题
一、CSS百分比padding都是相对宽度盘算的
在默认的水平文档流方向下,CSS
  1. margin
复制代码
  1. padding
复制代码
属性的垂直方向的百分比值都是相对于宽度盘算的,这个和
  1. top
复制代码
,
  1. bottom
复制代码
等属性的百分比值不一样。
这么设计的原因在我的新书(应该不出几个月就要出版了)中会有分析,这里不展开。
对于
  1. padding
复制代码
属性而言,恣意方向的百分比
  1. padding
复制代码
都现对于宽度盘算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个
  1. <div>
复制代码
元素:
  1. div { padding: 50%; }
复制代码
大概:
  1. div { padding: 100% 0 0; }
复制代码
大概:
  1. div { padding-bottom: 100%; }
复制代码
则这个
  1. <div>
复制代码
元素尺寸就是一个宽高1:1的正方形,无论其父容器宽度是多少,这个
  1. <div>
复制代码
元素总能保持比例不变。
这种能固定比例的特性什么作用呢?
对于绝大多数都结构,我们并不要求非要比例固定,但是有一种情况破例,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的结构下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端大概在响应式开辟情况下,图片终极展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7下宽度是375,iPhone7 Plus下是414,另有360等尺寸,此时需要的不是对图片举行固定尺寸设定,而是比例设定。
通常有如下一些实现:

1. 固定一个高度,然后利用
  1. background-size
复制代码
属性控制,如下:
  1. .banner {
  2. height: 40px;
  3. background-size: cover;
  4. }
复制代码
实时结果如下:
可以看到随着宽度的变革,总会有部门图片区域(宽度或高度)无法表现,并不是美满的做法。
2. 利用视区宽度单位
  1. vw
复制代码
,如下:
  1. .banner {
  2. height: 15.15vw;
  3. background-size: cover;
  4. }
复制代码
如果对兼容性要求不是很高,利用
  1. vw
复制代码
也是一个不错的做法,至少理解起来要更轻松一点。
但是,如果我们的图片不是通栏,而是需要离左右各
  1. 1rem
复制代码
的距离,此时,我们的CSS代码就要啰嗦点了,想要保持美满比例,就利用借助CSS3
  1. calc()
复制代码
盘算:
  1. .banner {
  2. height: calc(0.1515 * (100vw - 2rem));
  3. background-size: cover;
  4. }
复制代码
如果,图片距离两侧的宽度是动态不确定的,则,此时
  1. calc()
复制代码
也左支右绌了,但,恰恰是普普通通其貌不扬的
  1. padding
复制代码
属性,其兼容性和适应性都一级棒。
3. 利用百分比
  1. padding
复制代码
,如下:
  1. .banner {
  2. padding: 15.15% 0 0;
  3. background-size: cover;
  4. }
复制代码
此时无论图片的外部元素怎么变更,比例都是恒定不变的。
二、CSS百分比padding与宽度自适应图片结构
但是有时候我们的图片是不方便作为背景图呈现的,而是内联的
  1. <img>
复制代码
,百分比
  1. padding
复制代码
也是可以轻松应对的,求套路是比力固定的,图片元素外面需要一个固定比例的容器元素,例如下面的HTML结构:
  1. [/code][code]<div class="banner">
  2. <img src=""banner.jpg>
  3. </div>
复制代码
  1. .banner
复制代码
元素同样负责控制比例,然后图片添补
  1. .banner
复制代码
元素即可,CSS代码如下:
  1. .banner {
  2. padding: 15.15% 0 0;
  3. position: relative;
  4. }
  5. .banner > img {
  6. position: absolute;
  7. width: 100%; height: 100%;
  8. left: 0; top: 0;
  9. }
复制代码
结果就达成了!
眼见为实,客岁起点中文网手机版诸多页面的通栏广告就都是这么实现的,终极的结果拜见下面的gif截图(如果图无法表现,可以评论反馈):

可以看到,无论屏幕宽度多宽,我们的广告图片比例都是固定的,不会有任何剪裁,不会有任何区域缺失,结构就显得非常有弹性,也更坚固。
————-
着实,我之前不停低估百分比
  1. padding
复制代码
的实际应用价值,因为有
  1. vw
复制代码
单位的存在,毕竟理解
  1. vw
复制代码
看上去要更简单一些,以是,不停就没做相关本领的介绍。但是,随着图片相关结构处置惩罚越来越多,我发现,百分比
  1. padding
复制代码
的实用价值要比想象的大,要比
  1. vw
复制代码
单位实用场景更多,兼容性更好(百分比特性IE6+支持,图片100%覆盖IE8+支持)。
对于复杂结构,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如:
  1. img { width: 100%; }
复制代码
此时欣赏器默认会保持图片比例表现,图片宽度大了,高度也跟着一起变大;图片宽度小了,高度也跟着一起变小。开辟人员似乎无需关心图片真实比例是怎样的。
然而这种本领有一个非常欠好的体验问题,那就是随着页面加载的举行,图片占据的高度会有一个从
  1. 0
复制代码
到盘算高度的图片变革,视觉上会有明显的元素跳动,代码层面会有结构重盘算。
以是对图片高宽举行同时约定照旧有须要的,但是同时要保证宽度自适应,似乎有点难度。记着,如果碰到这种需求场景,没有比百分比
  1. padding
复制代码
结构更好的做法!
缩小欣赏器宽度可以看到差异宽度下的结构结果,Gif结果截图如下:

此demo难点就是图片自适应同时保持比例,以及页面革新的时候没有结构稳固不晃动,其焦点HTML和CSS代码如下:
  1. [/code][code]<div class="works-item-t">
  2.   <img src="./150x200.png">
  3. </div>
复制代码
  1. .works-item-t {
  2. padding-bottom: 133%;
  3. position: relative;
  4. }
  5. .works-item-t > img {
  6. position: absolute;
  7. width: 100%; height: 100%;
  8. }
复制代码
可以看到,当把垂直方向
  1. padding
复制代码
值只利用
  1. padding-bottom
复制代码
表示的时候,如果没有
  1. text-align
复制代码
属性干扰,
  1. <img>
复制代码
元素的
  1. left:0;top:0
复制代码
是可以省略的。
对于这种图片宽度100%容器,高度按比例的场景,
  1. padding-bottom
复制代码
的百分比值巨细就是图片元素的高宽比,就这么简单。
但,有时候,图片宽度并不是100%容器的,例如,图片宽度50%容器宽度,图片高宽比
  1. 4:3
复制代码
,此时,CSS垂直方向百分比就666了,如下:
  1. .img-box {
  2. padding: 0 50% 66.66% 0;
  3. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作