使用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. [Xcode 实际操作]九、实用进阶-(19)重写父类的绘图方法，使用图形上下文绘制自定义图形

    目录:[Swift]Xcode实际操作 本文将演示如何使用图形上下文,绘制自定义图形. 使用快捷键[Command]+[N]创建一个新的类文件. (在项目文件夹[DemoApp]上点击鼠标右键[New ...

  2. [Xcode 实际操作]九、实用进阶-(25)使用Storyboard(故事版)的约束功能，使项目快速适配各种分辨率的设备

    目录:[Swift]Xcode实际操作 本文将演示使用故事版的约束功能,使项目快速适配各种分辨率的设备. 在项目导航区打开并编辑主故事版[Main.storyboard]. 在当前故事版中,已经存在一 ...

  3. 基础篇-psql帮助命令

    \? psql命令帮助 \h sql语句帮助 \?常用命令 1.默认  \d 后面不跟参数,则显示当前数据库所有的表 2. \d  表名  ,则显示这个表的定义 3.\d 索引名  ,显示索引的信息 ...

  4. 图片美化增强AI接口调用手册

    在调合合AI平台提供的图片美化增强API接口,API平台链接:https://ai.ccint.com/doc/api/crop_enhance_image, 因为有遇到一些问题,写篇博客记录一下 A ...

  5. 【MySQL】全量+增量的备份/恢复

    生产环境中,有时需要做MySQL的备份和恢复工作.因MySQL是在运行过程中的,做全量备份需要时间,全量备份完成后又有数据变动,此时需要增量备份辅助.如果想恢复数据到一个空库(例如数据迁移或者上云等更 ...

  6. idea | SpringBoot项目热加载

    第一步: 在pom文件添加依赖: <dependency> <groupId>org.springframework.boot</groupId> <arti ...

  7. AtCoder Beginner Contest 053 ABCD题

    A - ABC/ARC Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement Smeke has ...

  8. CentOS 部署RabbitMQ集群

    1. 准备两台CentOS,信息如下: node1:10.0.0.123 node2:10.0.0.124 修改hostname请参照: $ hostname # 查看当前的hostname $ ho ...

  9. Java中的变量——通过示例学习Java编程（4）

    作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=14&cid= 变量是用来存放可以更改的值的容 ...

  10. 12.JAVA-基本数据类型的包装类操作

    1.基本数据类型的包装类 java是一个面向对象编程语言,也就是说一切操作都要用对象的形式进行.但是有个矛盾: 基本数据类型(char,int,double等)不具备对象特性(不携带属性和方法) 这样 ...