CSS 图像
通过CSS可以控制图像的大小和对齐方式。
图像大小
虽然在HTML中，img标签有属性height、width设置高和宽，在工作中却使用得非常少，通常使用CSS来控制大小。
给盒子设置属性height、width限制大小。单位通常是像素。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html> <head> <title>图像大小</title> <style type="text/css"> img.large { 500px; height: 500px;} img.medium { 250px; height: 250px;} img.small { 100px; height: 100px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> </body></html> |
图像剧中对齐
我们在《CSS 内外边距》学过内容居中，它的原理是将外边左右设置为auto。图像居中也是这个原理。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html> <head> <title>图像居中</title> <meta charset="UTF-8"> <style type="text/css"> img.align-center { display: block; margin: 0px auto;} img.medium { 250px; height: 250px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程" class="align-center medium" /><b><i>Servlet</i></b> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</p> </body></html> |
图像左右对齐
左右对齐图像使用的技术是浮动div元素。
float:left 左对齐
float:right右对齐
示例
|
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
|
<!DOCTYPE html><html> <head> <title>图像左右对齐</title> <meta charset="UTF-8"> <style type="text/css"> body { font-family: Georgia, "Times New Roman", serif; color: #665544;} img.align-left { float: left; margin-right: 10px;} img.align-right { float: right; margin-left: 10px;} img.medium { 250px; height: 250px;} </style> </head> <body> <h1>软件开发，成就梦想</h1> <p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程" class="align-left medium" /><b><i>Servlet</i></b> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</p><b><i>HTML5</i></b> 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</p> </body></html> |
