响应式Web设计- 图片
使用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设计- 图片的更多相关文章
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 初探响应式Web设计
公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...
- 响应式WEB设计的基本原则大总结
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
随机推荐
- Weekly Contest 111-------->943. Find the Shortest Superstring(can't understand)
Given an array A of strings, find any smallest string that contains each string in A as a substring. ...
- 2014-6-28 NOIP模拟赛
[今天我出的三道题目全部是图论哦,请大家轻虐] 1.魔术球问题弱化版(ball.c/.cpp/.pas) 题目描述 假设有 n 根柱子,现要按下述规则在这 n 根柱子中依次放入编号为 1,2,3,…的 ...
- IT兄弟连 JavaWeb教程 Cookie和Session应用结合使用
一般对于不要求安全的非敏感数据,建议存储在Cookie中! 对于敏感的数据,占用空间较小的,建议存储在Session中! 对于敏感的,较大的数据,存数据库!
- bzoj4563 HAOI2016放旗子
bzoj传送门 已知了"任意两个障碍不在同一行,任意两个障碍不在同一列",如果我们按每列只能放一个来考虑,那么这\(n\)个障碍一定是一个排列,那么也就是"每一列只能放一 ...
- linux mysql乱码问题
mysql,发现都是乱码,一堆问号,如下图: 查看mysql编码 需要修改mysql编码,打开/etc/my.cnf 文件 在下边添加如下行 [client] default_character_se ...
- Serervlet | 慕课课程实战 | 编写登录逻辑
Users.java package com.po; public class Users { private String username; private String password; pu ...
- $.ajax()与vue结合获取数据并渲染
html: <div id="app1"> <ul> <li v-for="item in datas"> <div ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- matplotlib 知识点13：绘制散点图（scatter函数精讲）
散点图是指在回归分析中,数据点在直角坐标系平面上的分布图,散点图表示因变量随自变量而变化的大致趋势,据此可以选择合适的函数对数据点进行拟合. 用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间 ...
- shell与aw的简单交互示例
先来看一段shell代码 word=“a test name” selectword=“test"lineitem=`echo "$word" | awk 'match( ...