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

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

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

Label自适应高度,浅谈图片宽度自适应解决方案。原稿出处: 百码山庄   

在网页设计中,随着响应式设计的赶到,各样响应式设计方案数见不鲜。对于图片响应式的难点也有好多前端开发人士在举行商讨。相比较好的图片响应式设想就是在分歧的显示屏分辨率下选拔不一致实际尺寸的图形,而达到在便捷互连网环境中央银行使大或重特大高清图片,在低速网络或要求替用户节省流量能源的条件中接纳小而清丽的图纸,保障用户无论在何种环境下都能有精良的浏览体验。可是那是二个特大而颇具挑衅的行事,小编那边不做这么些商讨,因为自身近年来还尚未那方面很好的执行。那里作者是要跟大家研商下同一张图纸在不一致幅度的来得区域中的展现难点。

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

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

父元素  {
    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图所示:

图片 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还必须做些工作

保真难题:

要是你们设计稿标准是iphone5,那么得到设计稿的时候自然会意识,完全不可能依照高保真上的标号来写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像素看起来过粗的问题

简单尝试

为了保险音讯呈现完整,保障图片随可视区域涨幅变化而宽度自适应,笔者一向给图片标签设置了大幅度百分之百,具体效果请看:图片宽度自适应(2)。

和示范一一致,我们依旧手动改变可视区域上涨幅度来观察图片的变现:

图片 2

现行反革命看来图片是能够依照可视区域上涨幅度自适应了,但是难点来了:首先,全部图片不论原始大小宽窄一律以但是区域上涨幅度为行业内部了,齐刷刷的一刀切,毫无美感;其次,当较宽彰显区域展现较窄图片时,图片出现严重失真,甚至失去识别度。好啊,窄屏的题材一下子就解决了了,宽屏的标题有来了,不亮堂那是要闹哪样!不过难点出来了,大家总要想方法去解决啊,那怎么做吧?

图形自适应大小 很简短 给图片八个定位的急剧,让这一个图片依照比例,适应中度,那样图片不会变形
//我先把图片设置成屏幕宽,屏幕高
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需求针对每种小幅度去设置,那根本不可行,无疑是作茧自缚麻烦,因为实际行使中,大家完全不恐怕预感用户将选拔多大开间的图样。所以就像是单从控制图片样式已经找不到什么样消除办法了,可是自个儿起来关怀 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外面加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):

图片 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;}

当本人,再一次展开测试的时候,欣然自得多了,你们感受下:图形宽度自适应(4)。

最终,补上完整的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)、火狐等专业浏览器下是那般的(包罗IE8+):

中档那列子成分的margin-left或margin-right的起源是分歧等的,在IE⑥ 、IE7中,尽管不给中间列设定margin-left和margin-right,它的子成分的左右异地距的源点如故是在左右两列宽的的基本功上的,就像有margin-left和margin-right一样。所以为了各浏览器保持一致,中间那列依然设二个margin-left和margin-right为好。

IE6中的3px间隙bug

在上海教室的ie6截图中,咱们看来各列之间有一条3px的距离,那是唯有IE6才有的难题。

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

但万一把高级中学级列的margin-left和margin-right分别为左右两列的小幅度时(上面已经说了,那也是必须那样做的),即便把左列的margin-right设为-3px,右列的margin-left设为-3px也依旧尚未作用。那时候还得把高级中学级列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行。如下:

相关文章