浅谈图片宽度自适应消除方案

2015/10/19 · CSS,
HTML5 · 3
评论ca88手机版客户端下载, ·
自适应

原来的作品出处: 百码山庄   

在网页设计中,随着响应式设计的过来,各类响应式设计方案习以为常。对于图片响应式的题材也有诸多前端开发人士在展开切磋。比较好的图纸响应式设想便是在不一样的显示器分辨率下使用差异实际尺寸的图形,而完毕在便捷网络环境中央银行使大或重特大高清图片,在低速互连网或索要替用户节省流量财富的条件中采用小而分明的图形,保证用户无论在何种环境下都能有得天独厚的浏览体验。可是那是一个庞然大物而持有挑衅的做事,笔者那边不做那几个斟酌,因为作者最近还尚未那方面很好的施行。那里小编是要跟大家议论下同一张图片在分裂幅度的来得区域中的展现难题。

//SizeForLabel.h
@interface SizeForLabel : NSObject
+(CGSize)labelRectWithSize:(CGSize)size LabelText:(NSString *)labelText
Font:(UIFont *)font;
@end

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

父元素  {
    width: 100%;
}

方法一
子元素左浮动

方法二
display: flex;

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

难点讲述

浅谈图片宽度自适应解决方案,宽度自适应。咱们先来看下笔者想要描述的标题。首先本身准备了叁张宽度不一致的图片,让他们垂直排列在页面中,除了剔除图片自个儿在笔直方向上产生的间隔,不做任何任何样式处理,那种处境我们日常在博文中时常看看,在写博文的时候日常接纳,具体效能请看:图表宽度自适应(1)。不难看下我们的页面结构:

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图所示:

ca88手机版客户端下载 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;

其1很好达成,左右两列分别左浮动和右浮动并给二个稳定宽度,中间不成形,也不设定宽度。那样主旨就可以了。但为了包容IE还非得做些工作

保真难题:

设若你们设计稿标准是iphone伍,那么拿到设计稿的时候一定会意识,完全不可能依据高保真上的标注来写css,而是将逐壹值取半,那是因为运动装备分辨率差别等。设计师们是在真正的iphone5机器上做的标号,而iphone5种类的分辨率是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像素看起来过粗的问题

回顾尝试

为了保证音讯突显完整,保障图片随可视区域上涨幅度变化而宽度自适应,笔者一直给图片标签设置了步长百分之百,具体职能请看:图形宽度自适应(二)。

和示范壹同1,我们依然手动改变可视区域上涨幅度来观望图片的展现:

ca88手机版客户端下载 2

明日总的来说图片是足以根据可视区域上涨幅度自适应了,可是难点来了:首先,全体图片不论原始大小宽窄壹律以然而区域上涨幅度为行业内部了,齐刷刷的一刀切,毫无美感;其次,当较宽显示区域展现较窄图片时,图片出现严重失真,甚至失去识别度。好吧,窄屏的题材消除了,宽屏的题材有来了,不了解那是要闹哪样!然而难点出来了,大家总要想艺术去搞定啊,那怎么做呢?

图表自适应大小 很简单 给图片3个一定的宽度,让这一个图片依照比例,适应中度,那样图片不会变形
//我先把图片设置成屏幕宽,屏幕高
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 ?

本着荧屏变化大小

1旦用户打开了转屏设置,在网页加载之后更改了荧屏的宽窄,那么监听显示器的成形就能够落成动态切换来分样式:

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需求针对每一个增长幅度去设置,那根本不可行,无疑是咎由自取麻烦,因为其实使用中,大家全然不也许预言用户将选取多大开间的图形。所以仿佛单从决定图片样式已经找不到怎么样化解办法了,可是本身起来关切 width:百分之百; 的标题。

大家精晓,在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外面加二个容器来控制转变与否:

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>

可以吗,将来大家在来探望,被折磨成什么体统了,图形宽度自适应(三):

ca88手机版客户端下载 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
评论

ca88手机版客户端下载 4

留神,中间那列供给把左右多个异地距分别设为左右两列的增长幅度,不然会有个别标题。如下:

在谷歌(谷歌(Google))、火狐等规范浏览器下是这么的(包蕴IE八+):

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

IE6中的3px间隙bug

在上海体育场地的ie6截图中,大家看看各列之间有一条三px的间距,那是惟有IE陆才有的题材。

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

但借使把高级中学级列的margin-left和margin-right分别为左右两列的升幅时(上面已经说了,这也是必须这么做的),即便把左列的margin-right设为-三px,右列的margin-left设为-叁px也还是尚未效果。那时候还得把高中级列的margin-left设为左列宽度-三px,margin-right设为右列宽度-3px才行。如下:

网站地图xml地图