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

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

写在前面

我们都知道,页面的布局分为静态布局和响应式布局,为什么响应式布局很火呢?因为在过去我们在处理不用终端之间的页面布局问题的时候,都是使用好几套代码来实现,举例子来说,假设我们做一个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联系我,或者直接扫我的名片联系我,能帮的我尽力帮!共同进步!

谢谢阅读

相关文章
|
5月前
|
计算机视觉 Python
目标检测笔记(四):自适应缩放技术Letterbox完整代码和结果展示
自适应缩放技术Letterbox通过计算缩放比例并填充灰边像素,将图片调整为所需尺寸,保持原始比例不变,广泛应用于目标检测领域。
166 1
目标检测笔记(四):自适应缩放技术Letterbox完整代码和结果展示
|
7月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
10月前
表格高度根据内容自适应的瀑布流
表格高度根据内容自适应的瀑布流
92 1
|
10月前
|
UED
【专栏:交互与用户体验篇】网页中的色彩搭配与配色方案
【4月更文挑战第30天】网页设计中,色彩搭配影响用户体验。了解色彩心理学、搭配原则及配色方案至关重要。色彩能传达信息、影响感知,通过对比与和谐、色彩平衡和层次创造良好视觉效果。单色、类似色、对比色和互补色四种配色方案各有优缺点,需根据目标用户和网页需求选择。恰当的色彩运用能提升美感,增强网页吸引力。
210 5
|
10月前
好看的网站自适应图片文字广告位代码
上边是图片广告位,下边是文字广告位,都是自适应的。 图片觉得不直观的可以去网站看看 代码从网上扒的,自己也修改了一下,更美观、也更适应网站。 一个好的广告位不仅不会拉低网站的颜值,还会增加广告主选择你的机会
209 2
好看的网站自适应图片文字广告位代码
|
10月前
自适应日落动态卡通动画404页面模板
自适应日落动态卡通动画404页面模板
44 4
自适应日落动态卡通动画404页面模板
|
10月前
自适应二次元404页面源码
自适应二次元404页面源码
174 3
自适应二次元404页面源码
|
10月前
|
前端开发 容器
如何实现一个两栏布局,右侧自适应?三栏布局中间自适应?
要实现一个两栏布局,右侧自适应的效果,可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例:
96 1
Echarts实战案例代码(45):拼接屏字体自适应的解决方案
Echarts实战案例代码(45):拼接屏字体自适应的解决方案
84 0
|
缓存 iOS开发 MacOS
万能动态滤镜GIF框架想不想要的?
Wintersweet是一款快速让控件播放GIF和添加过滤器的框架。

热门文章

最新文章