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 {
width: 500px;
height: 500px;}
img.medium {
width: 250px;
height: 250px;}
img.small {
width: 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 {
width: 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 {
width: 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
>
<
p
><
img
src
=
"https://www.0735it.net/images/kc/h5.jpg"
alt
=
"HTML5 课程"
class
=
"align-right medium"
/>
<
b
><
i
>HTML5</
i
></
b
> 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</
p
>
</
body
>
</
html
>
|
