-
Notifications
You must be signed in to change notification settings - Fork 0
/
img_of_HTML.html
49 lines (46 loc) · 1.88 KB
/
img_of_HTML.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML中的多媒体</title>
</head>
<body>
<h1>HTML中的图片</h1>
<h1>HTML中引入SVG代码</h1>
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="red" />
<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
<polygon points="120,0 240,225 0,225" fill="yellow"/>
<text x="50" y="100" font-family="Verdana" font-size="55"
fill="white" stroke="black" stroke-width="2">
HTML 中的SVG 代码
</text>
</svg>
<h1>HTML 中的自适应图片</h1>
<img srcset="img/response-800.png 800w,
img/response-480.png 480w,
img/response-320.png 320w"
sizes="(min-width: 600px) 500px,
(max-width: 480px) 340px"
src="img/response-480.png"
alt="Response img 实例图片" >
<p>根据不同的分辨率，显示不同的图片, 依然是<img>元素， 但是其中的属性，多了srcset 和 sizes</p>
<dl>
<dt>srcset</dt>
<dd>这个属性定义了我们允许浏览器选择的图像集，以及每个图像的大小。 在每个逗号之前， 我们写：
<ol>
<li>一个文件名</li>
<li>一个空格</li>
<li>图像的固有宽度（以像素为单位）——注意这里使用的单位为 w ，而不是px</li>
</ol></dd>
<dt>sizes</dt>
<dd>这个属性定义了一组媒体条件， 并且指明了当某些媒体条件为真时， 什么样的图片尺寸是最佳选择——我们在之前已经讨论了一些提示。 在这种情况下，在每个逗号之前，我们写：
<ol>
<li>一个媒体条件（max-width:480px)——意思是当可视窗口的宽度小于等于480px时</li>
<li>一个空格</li>
<li>当媒体条件为真时， 图像将填充槽的宽度（440px)</li>
</ol></dd>
</dl>
</body>
</html>