H5页面布局之图片液态化(自适应)处理简述

版权声明:您可以转载我的文章,但是请标明文章出处。谢谢! https://blog.csdn.net/qq_41485414/article/details/81061576

写在前面

我们都知道,页面的布局分为静态布局和响应式布局,为什么响应式布局很火呢?因为在过去我们在处理不用终端之间的页面布局问题的时候,都是使用好几套代码来实现,举例子来说,假设我们做一个app或者web应用,那么我们必须要面对的一个问题是用户使用什么终端访问?如果是PC,我们需要用960PX-1204PX的布局方式来写,那么如果用户使用ipad呢?768-1024px,使用手机呢?再分的细一点,如果用户使用的是ipadmini还是pro还是air呢?当这些问题通通出现的时候,我们会发现,我们之前解决问题的办法已经达不到现实的要求了,怎么办呢?响应式的布局就出现了!那么我们今天其实不是要讲怎么实现响应式的布局,等到我总结完毕的时候,我会写一个详细的教程出来,今天我们简单的讲一下响应式布局中的图片处理问题。

示意图

我们拿一张比较大的图片和一张比较小的图片来做例子,首先是一张比较大的图片,我用我公司地址的一张俯瞰图(我在杭州滨江,喜欢交朋友,距离近的可以找我玩,我请客,哈哈!):


再用一张比较小的图片:


我先说一下我们平常怎么处理的

我们一般写一个div或者是别的元素,准备将一张图片作为背景图的时候,我们会这样写:

css源码:

.test1{
			height: 40rem;
			width: 30rem;
			background-image: url(img/slide3.png);
	}

H5源码:

<div class="test1"></div>

对吧,这是最普遍的一种做法, 不做任何的处理,效果是怎么样的呢?    


图片变形,当然还有很多的时候图片会出现失真的情况,所以基于这些问题,我们怎么简单的处理一下:

首先我们简单的做几个例子:实现一个这样的效果:


手机端实现这样的效果:


ok,实现这样的其实就是基本可以满足我们的需求,可以根据自己的定义的大小来铺满同时图片不变形,我们看源码:

css源码:

div img{max-width: 100%;height: auto;}

H5源码:

<div id="" style="width: 5rem;height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 20rem;height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 35rem;height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 40rem;height: 40rem;">
			<img src="img/slide3.png" >
		</div>

有人看过源码会说了,这不是耍人吗?其实不是的,最简单的适应就是这样的,这也是最简单的一种处理办法,有人说了,有的时候我们需要的是将一个logo铺满是不是也是可以的,logo的处理可以这样:

假设这是一个logo:


那么实现这种效果其实也很简单:

css源码:

.logo{ display:block;
				width:100%;
				height:40px;
				text-indent:55rem;
				background-image: url(img/slide3.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
        }

H5源码

<div class="logo" style="width: 7rem;"></div>

这里简单的解释一下:

background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸

注意事项

下面讲一下用的时候需要注意的几个地方:

第一:

如果您的代码是这样的:

<div id="" style="width: 5rem;height: 4rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 20rem;height: 15rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 35rem;height: 20rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 40rem;height: 40rem;">
			<img src="img/slide3.png" >
		</div>

效果会是这样:


可以看出来和之前的区别是中间的空间变得很大,这是为什么呢?因为我们使用具体的数值+rem的时候,他会将布局的空间展示为那么大,那么我们的style里面已经设置好的是height为auto,什么意思呢?就是css为什么保证图片不会变形,还要不失真,只能将图片等比缩放,那么等比缩放的时候就意味着有一些地方是不会出现图片的,所以只能是空白来填充!那么怎么解决这样的问题呢?我们可以不设置高度,或者设置的时候将高度用百分比表示就行了!

第二:

我们使用比较小的图片的时候,我们设置一个比较大的宽度的时候,图片是没办法完全填充的,举个例子:

<div id="" style="width: 5rem;height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 20rem;height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 35rem;height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 70rem;height: 40rem;">
			<img src="img/slide1.jpg" >
		</div>

效果:


这是之前的比较小的图片,认真的可以发现我们最后一张是和之前的一张的宽度一样的,那么其实我们设置的时候不是的,我们写的是70rem的宽度,为什么会出现这样的情况呢?是因为我们在设置一个比原图宽度还要宽的数值的时候,图片会出现失真的情况,为了避免这样的情况出现,所以他会显示原图的大小,而不会变化的很大!

最后关于rem的使用我们可以看一下这个人的博客:

怎么使用rem

关于不同终端的尺寸问题,可以查看这个网址:

不同终端屏幕尺寸展示

ok,今天写的比较仓促,写的可能有一些不是很清晰,有什么不明白的可以直接博主简介那里QQ联系我,或者直接扫我的名片联系我,能帮的我尽力帮!共同进步!

 谢谢阅读

我的名片:



展开阅读全文

没有更多推荐了,返回首页