web响应式图片设计实现
随着移动开发热潮的兴起，已经有越来越多的公司将移动端的开发列为核心，其中不论是webapp还是手机页面都是如此，在开发的过程中就涉及到了一个web响应式图片的问题，这里我们就来探讨一下响应式图片的实现
最简单的图片响应式的实现就是通过限定图片的长宽的像素值，并把图片的宽度设置为100%，然后把高度设置为auto.
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog案例</title>
<style type="text/css">
img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="img1.jpg">
</body>
</html>
效果如下：
从图中大致上可以看出图片随着窗口的大小发生了响应，但是录制工具渲染的效果不太理想，这个大家就将就着看吧
但是这一种方法有一个局限，就是完全随着屏幕的变大变小来拉伸一张图片，这样屏幕一旦变大了的话容易出现图片失真的现象，这个时候我们要达到的要求是最大也就是能够显示到图片原来的大小，视口变小的时候，图片也跟着变下。
这个时候代码可以这样改进：
img{
max-width:100%;
height:auto;
}
这样做的好处是解决了图片因为响应屏幕宽度的变化而导致的失真的现象，在这里要说明一下就是图片放大到极致就是原图片的宽度，如果是屏幕比图片小的话，那么图片就会响应屏幕的大小发生变化，同时保持宽度被拉伸到100%
除了可以这样来设置响应式图片，我们还可以通过将图片设置为背景图片的方法来达到响应式
实现思路是将图片当做背景来使用，然后在背景图片中添加一个background-size: contain;属性
例如：将上面的代码我们可以这样来改写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog案例</title>
<style type="text/css">
div {
width: 100%;
height: 400px;
background-image: url('img1.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
细心的读者是否想过这样做的根本还是没有解决图片的响应的问题，这样只不过说得上是让图片适应屏幕的大小而已，那么终究要才能实现图片的响应呢？这里我们的设计思路跟响应式布局有点相似，都是通过设置CSS的媒体查询来让浏览器在不同的情况下加载不同的图片，我们可以把上面的例子这样改写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog案例</title>
<style type="text/css">
body{
background-repeat:no-repeat;
background-image:url('img1.jpg');
}
@media only screen and (min-width: 400px) {
body {
background-image: url('img2.jpg');
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行的效果如下：
当然除了上面的这种方法，在HTML5中还提供了picture元素，用于响应式图片的实现，picture元素的用法与video与audio的用法有点相似，都是通过在标签下面添加source标签用来显示你所要显示的图片，具体的使用案例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog案例</title>
<style type="text/css">
img {display: block; margin: auto;}
</style>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="img1.jpg">
<source media="(min-width: 465px)" srcset="img2.jpg">
<img src="img3.jpg" alt="a cute kitten">
</picture>
</body>
</html>
分析：source主要是用来显示要存放的图片，然后img默认是不显示的，但是如果是浏览器不支持picture的时候，img就会被显示出来，用来解决标签在不同浏览器之间的兼容性。source中的media是用来指定响应式图片的响应范围，srcset就是用来指定图片源。
这个就是原生的图片响应式实现，运行一下，效果跟上面的例子相同
响应式图片我们可以当做一个知识点来进行储备就可以了，实现的原理也是五花八门，但是推荐大家使用picture来实现，一个是实现比较规范，另外一个是能够达到按需加载的要求，如果觉得本文有所获或者对你有帮助的话，请不吝点赞
web响应式图片设计实现的更多相关文章
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- 响应式网页设计：互联网web产品RWD概念
RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
- html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...
- IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...
随机推荐
- CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
- Bootstrap之字体图标
优点:1.减少请求 2.容易控制样式 所在位置:在下载的bootstrap文件中的fonts文件夹存放字体图标 默认路径为当前目录下,如需修改路径,则需在bootstrap.css中查找font-fa ...
- DVWA安装，ALMP环境搭建以及php版本转换
前言 本文记录DVWA(Damn Vulberability Web App)在虚拟机中安装配置,包括ALMP环境的搭建和php版本的转换. 目录 2. ALMP环境搭建 3. php版本切换 一. ...
- MAC下的XMPP环境搭建
实现即时通信有多种方式,下面讲的是Mac下使用XMPP来实现. XML Messages Presence Protocol 可扩展消息处理协议 简单讲就是基于XML语言的点对点即时通信协议 原理: ...
- Xcode插件优缺点对比（推荐20款插件）
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- IOS开发之Bug--View是懒加载导致出误以为是UI加载的bug
虽然分类为bug,但也算的上是一个问题,一个很简单的问题.先来看看问题的重现,就写了简单的Demo验证效果: 问题:点击ViewController跳转到TwoViewController,发现会延迟 ...
- 比Ansible更吊的自动化运维工具，自动化统一安装部署_自动化部署udeploy 1.0
新增功能: 2015-03-11 除pass(备份与更新)与start(启动服务)外,实现一切自动化. 注:pass与start设为业务类,由于各类业务不同,所以无法实现自动化.同类业务除外,如更新的 ...
- Shell 编程
Shell 是一门脚本语言(又称解释型语言),Shell 其实就是一个纯文本文件,通常以[#!/bin/bash]开始.脚本自上而下,从左至右分析并执行,其中[#]后面的为注释.脚本有以下几种运行方式 ...
- 47个过程(PMBOK2008)
项目管理过程 知识领域 过程组 含义 之前应完成 之后要进行 制定项目章程 整合 启动 编写一份正式批准项目并授权项目经理使用组织资源的文件的过程 无 制定项目管理计划 制定项目管理计划 整合 规划 ...
- angularJS操作键值对象（类似java的hashmap）填坑小结
前言: 我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何创造(使用)这样一个对象呢 思路分析: 我们知道在jav ...