浅谈图片宽度自适应解决方案,宽度自适应

浅谈图片宽度自适应解决方案

2015/10/19 · CSS,
HTML5 · 3
评论 ·
自适应

初稿出处: 百码山庄   

在网页设计中,随着响应式设计的过来,各类响应式设计方案层见迭出。对于图片响应式的题材也有很多前端开发职员在进展商量。比较好的图片响应式设想就是在分歧的显示屏分辨率下接纳分歧实际尺寸的图形,而达到在全速互联网环境中行使大或重特大高清图片,在低速网络或必要替用户节省流量能源的条件中接纳小而清晰的图纸,保险用户无论在何种环境下都能有优秀的浏览体验。可是那是一个石破惊天而持有挑衅的工作,小编那里不做那一个商量,因为本人当下还从未那方面很好的执行。那里自身是要跟咱们谈论下同一张图纸在分歧幅度的来得区域中的彰显难题。

//SizeForLabel.h
@interface SizeForLabel : NSObject
+(CGSize)labelRectWithSize:(CGSize)size LabelText:(NSString *)labelText
Font:(UIFont *浅谈图片宽度自适应解决方案,宽度自适应。)font;
@end

先是讲的是3列布局,左右两列宽度固定,中间一列宽度自适应

父元素  {
    width: 100%;
}

方法一
子元素左浮动

方法二
display: flex;

实现根据屏幕宽度变化字体大小和盒子变化,使用rem;

标题讲述

咱俩先来看下小编想要描述的题材。首先自个儿准备了三张宽度分裂的图样,让她们垂直排列在页面中,除了剔除图片自身在笔直方向上发生的区间,不做此外任何样式处理,那种意况大家平日在博文中时时来看,在写博文的时候平日利用,具体职能请看:图形宽度自适应(一)。简单看下大家的页面结构:

JavaScript

<img src=”imgs/560×200.jpg” alt=””><br> <img
src=”imgs/440×200.jpg” alt=””><br> <img
src=”imgs/300×200.jpg” alt=””>

1
2
3
<img src="imgs/560×200.jpg" alt=""><br>
<img src="imgs/440×200.jpg" alt=""><br>
<img src="imgs/300×200.jpg" alt="">

为了便于查看效果,大家平素调整浏览器宽度来测试。测试效果如下gif图所示:

图片 1

大家简单窥见,在大家转移窗口可视区域的时候,图片宽度并不会随着变动,以至于在小显示器中大家不得不开到图片的壹有些,这是多多益善人所不乐见的,因为那极有十分的大概率会导致重大音信丢失。那么那一个标题何以缓解?

//SizeForLabel.m
//参数1:Label的大小
//参数2:Label上文字内容
//参数3:文字的字体大小
+(CGSize)labelRectWithSize:(CGSize)size LabelText:(NSString *)labelText Font:(UIFont *)font{ 
NSDictionary *dic = [NSDictionary dictionaryWithObjectsAndKeys:font, NSFontAttributeName, nil]; 
CGSize actualsize = [labelText boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:dic       context:nil].size; return actualsize;
}  


self.label = [[UILabel alloc] init];
//Label字体大小(注意:要与自适应方法里的大小一致)
self.label.font = [UIFont systemFontOfSize:20.0f];[self addSubview:self.label];
//计算大小(我这里算的是固定宽度,计算高度;也可以固定宽度,计算高度)
CGSize digestHeight = [SizeForLabel labelRectWithSize:CGSizeMake([[UIScreen mainScreen]bounds].size.width - 20,   MAXFLOAT) LabelText:@"Label上文字内容" Font:[UIFont systemFontOfSize:20.0f]];
//给Label设置大小
self.label.frame = CGRectMake(10, 10, [[UIScreen mainScreen]bounds].size.width - 20, digestHeight);
//文字换行
self.label.numberOfLines = 0;

以此很好贯彻,左右两列分别左浮动和右浮动并给四个永恒宽度,中间不转变,也不设定宽度。那样基本就足以了。但为了包容IE还必须做些工作

保真难题:

借使你们设计稿标准是iphone伍,那么得到设计稿的时候自然会意识,完全不可能依照高保真上的标号来写css,而是将顺序值取半,那是因为移动设备分辨率不1致。设计师们是在实事求是的iphone5机器上做的标注,而iphone五种类的分辨率是640,实际上大家在付出只供给根据320的规范来。为了节省时间,不至于每趟都亟待将标注取半,大家得以将全部网页缩放比例,模拟进步分辨率。那个做法很简短,为分裂的装置安装差异的meta即可:

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
解决安卓下1px像素看起来过粗的问题

大致尝试

为了保证新闻彰显完整,保险图片随可视区域上涨幅度变化而宽度自适应,作者直接给图片标签设置了步长百分百,具体职能请看:图表宽度自适应(二)。

和示范一如出壹辙,大家照旧手动改变可视区域涨幅来看到图片的表现:

图片 2

近年来总的来说图片是能够依照可视区域上涨幅度自适应了,可是难题来了:首先,全部图片不论原始大小宽窄1律以不过区域上涨幅度为正式了,齐刷刷的1刀切,毫无美感;其次,当较宽显示区域显示较窄图片时,图片出现严重失真,甚至失去识别度。好吧,窄屏的标题消除了,宽屏的难点有来了,不精通那是要闹哪样!可是难点出来了,大家总要想办法去消除啊,那怎么做呢?

图形自适应大小 很不难 给图片七个定位的大幅,让这些图形依据比例,适应高度,那样图片不会变形
//我先把图片设置成屏幕宽,屏幕高
UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen]bounds].size.width,       [[UIScreen mainScreen]bounds].size.height)];
[self addSubview:img];
//图片会根据宽度自适应高度
img.contentMode = UIViewContentModeScaleAspectFit; 
//图片会根据高度自适应宽度
//img.contentMode = UIViewContentModeScaleAspectFill;

中级列要不要设置margin-left和margin-right ?

本着显示器变化大小

假使用户打开了转屏设置,在网页加载之后更改了显示屏的宽度,那么监听荧屏的变更就足以做到动态切换到分样式:

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);

行使媒体询问设置根元素字体大小

优点,就是无需监听浏览器的窗口变化,它会跟随屏幕动态变化。
@media screen and (device-width: 640px) { /*iphone4/iphon5*/
      html {
        font-size: 100px;
      }
    }
@media screen and (device-width: 750px) { /*iphone6*/
      html {
        font-size: 117.188px;
      }
    }
@media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

兵来将挡,水来土掩

是题材,总有化解的办法,只是本金高低的标题。对于地方这么些难点作者思量了长时间,刚开端自身想利用width: 百分百;max-width: 图片宽度; 来处理,然则,作者发现图片宽度并不联合,max-width需求针对每1个小幅度去设置,那根本不可行,无疑是自作自受麻烦,因为实在应用中,大家全然不能够预感用户将应用多大幅度面包车型客车图片。所以就像单从控制图片样式已经找不到如何化解办法了,不过本人开首关注 width:100%; 的难题。

小编们掌握,在CSS中,宽度的百分比是是周旋于父级容器宽度的。假使我们能有主意控制图片标签的父容器的宽窄,那难题是或不是就消除了吧?

率先,为了让图片标签有可控的父成分,大家先对代码结构做一丢丢调动:

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

好了,接下去就是何许控制img-wrap成分的宽窄的难点了。笔者先是想到的是变化(float),因为大家掌握浮动成分的肥瘦是随内容变更的,所以本身先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

不过,难点又来了,浮动成分会毁掉原有的布局,要是不做扫除浮动处理,会招致后面包车型大巴情节紧跟在转移成分之后。所以为了确定保证不影响此外剧情,大家还得在img-wrap外面加2个器皿来支配转变与否:

JavaScript

<div class=”row”> <div class=”img-wrap”> <img
src=”imgs/560×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/440×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300×200.jpg" alt="">
    </div>
</div>

好啊,将来我们在来探望,被折腾成什么样体统了,图片宽度自适应(三):

图片 3

哈哈,好像是自作者想要的意义了。可是,作为三个略带情感障碍的开发者,尽管达到了自个儿想要的法力,但加了那么多层嵌套标签,总让本身觉得不痛快。于是,笔者继续折腾,终于小编顿觉, display:inline-block 的成分宽度也是随内容变更的,而且图片暗许样式恰巧也展现为inline-block的成效,是还是不是可以从那里入手吧?

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

布局再度回归到只有一层嵌套,但是css样式却必要调整一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当笔者,再度开始展览测试的时候,心旷神怡多了,你们感受下:图片宽度自适应(四)。

谈起底,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%;
vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3
评论

图片 4

留神,中间那列须求把左右四个异地距分别设为左右两列的幅度,不然会某些标题。如下:

在谷歌(Google)、火狐等规范浏览器下是如此的(包涵IE八+):

高级中学级那列子成分的margin-left或margin-right的源点是差异的,在IE陆、IE七中,即便不给中间列设定margin-left和margin-right,它的子成分的左右外乡距的起源照旧是在左右两列宽的的根底上的,就好像有margin-left和margin-right壹样。所以为了各浏览器保持壹致,中间这列依旧设三个margin-left和margin-right为好。

IE6中的3px间隙bug

在上图的ie陆截图中,大家看到各列之间有一条三px的间距,那是唯有IE6才有的难题。

就算中间那列的margin-left和margin-right都为0的话,则只要把左列的margin-right设为-三px,右列的margin-left设为-叁px就行了。

但万壹把高级中学级列的margin-left和margin-right分别为左右两列的大幅时(下边已经说了,那也是必须这么做的),尽管把左列的margin-right设为-三px,右列的margin-left设为-叁px也仍然不曾效果。那时候还得把高级中学级列的margin-left设为左列宽度-3px,margin-right设为右列宽度-三px才行。如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图