使用width属性：如果width属性设置为100%,图片会根据上下范围实现响应式的功能。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>

img {
width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="Images/HTML5LOGO.jpg" />
<p>调整浏览器窗口查看图像是如何扩展的。</p>
</body>
</html>

注意：在以上实例中，图片会比它原来实际例图片大，我们可以使用max-width属性来解决这个问题，如果max-width属性设置为100%，图片永远不会大于它原始的大小。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="Images/HTML5LOGO.jpg" />
<p>调整浏览器窗口查看图像是如何扩展的。</p>

</body>
</html>

响应式Web设计- 图片的更多相关文章

  1. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  2. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  3. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  4. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  5. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  6. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  7. 初探响应式Web设计

    公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...

  8. 响应式WEB设计的基本原则大总结

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  9. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

随机推荐

  1. 萌新笔记之二叉搜索树(BST)

    前言,以前搞过线段树,二叉树觉得也就那样= =.然后数据结构的课也没怎么听过,然后下周期中考... 本来以为今天英语考完可以好好搞ACM了,然后这个数据结构期中考感觉会丢人,还是好好学习一波. 二叉搜 ...

  2. CodeForces 689B【最短路】

    题意: 给你一副图,给出的点两两之间的距离是abs(pos1-pos2),然后给你n个数是表示该pos到x的距离是1. 思路: 直接建边,跑spfa就好了.虽然说似乎题意说边很多,其实只要建一下相邻的 ...

  3. 我不知道的C#—字符串池机制

    字符串具有值类型的特点对字符串,对同一个字符串大量修改或者对多个引用赋值同一个字符串对象时会产生大量的临时字符串对象,影响性能,但是CLR为我们做了一些工作来消除这些弊端.      对同一个字符串大 ...

  4. 洛谷 P4704 太极剑【贪心】

    首先考虑分割线能分割一条线当且仅当分割线一个端点在这条线的ab中间,另一端点在外面,也就是分割线对应的一条弧不能同时有这条线的两个端点 每条线的两端点都染同色,然后分段,一段里面颜色互不相同,分割线就 ...

  5. C 语言实例 - 字符串中各种字符计算

    C 语言实例 - 字符串中各种字符计算 C 语言实例 C 语言实例 计算字符串中的元音.辅音.数字.空白符. 实例 #include <stdio.h> int main() { ]; i ...

  6. ebullient(2018.10.25)

    结论巨好想,每一次操作可以看作把一个b往前移一位,另一个b往后移一位,逆序对个数不改变,判断即可做第一问. 此处代码仅给出第一问做法: #include<cstdio> #include& ...

  7. C - Heavy Transportation

    //改版dijkstra #include <iostream> #include <algorithm> #define Faster ios::sync_with_stdi ...

  8. (洛谷 P1429 平面最近点对（加强版） || 洛谷 P1257 || Quoit Design HDU - 1007 ) && Raid POJ - 3714

    这个讲的好: https://phoenixzhao.github.io/%E6%B1%82%E6%9C%80%E8%BF%91%E5%AF%B9%E7%9A%84%E4%B8%89%E7%A7%8D ...

  9. ubuntu dpkg命令总结

    dpkg是Debian系统的后台包管理器,类似RPM.也是Debian包管理系统的中流砥柱,负责安全卸载软件包,配置,以及维护已安装的软件包.由于ubuntu和Debian乃一脉相承,所以很多命令是不 ...

  10. KEIL MDK之RTX的移植

    原文: http://lib.csdn.net/article/embeddeddevelopment/12240 一 将MDK安装目录的C:\keil\ARM\RL\RTX\Config下面的配置文 ...