怎么将网页中的图片调整到最佳大小？

在网页制作中，有多种方式可以将图片调整为合适的大小：

一、使用CMS系统管理网站的内容页面：清圆CMS管理网站的内容比较方便，进入后台，添加或者选中已有的页面标题，会出答厅塌现类似如图的界面，其中椭圆形标记的是编辑控件，方形框就是图像上传按钮：

点击这个按钮后会有图片上传等 *** 作选项，如图：

在这个对话框里，有宽度、高度，可以直接设定图像的大小，右侧的小锁头图标是宽高比例锁定，也就是说，只要改变宽度或高度，整个图像就会按比例调整。因此，若是在一片文章里有多幅图像，建议将图片的宽或高度统一设置为640或320像素。

大多数CMS管理系统与此设置方法类似。

二、若不是通过CMS管理系统添加图片，则需要通过Dreamweaver或者其它网页编辑器（如记事本），使用代码和参数来控制每个图片的大小。具体代码为：<img src="./XXX.jpg" width="50" height="50">

其中，“img”是图像元素标签，src是图像的源路径，这个路径可以是从其它网站的链接地址，也可以是本地服务器的地址，本例中的路径即等号后面的内容是本地服务器（或网站所在服伏改务器的图像目录），注意：前引号后面的.表示网站根目录，这个地址也可以为“/pic/XXX.jpg”，“pic”是图像所在目录。后面的width和height是定义图像大小的两个参数，分别表示图像的宽带和高度，注意，引号是不能缺少的。

可以使用css的background-size属握庆性来调整背景图片的大小，比如：

background-size: 240px 180px

背景图片的宽为240像素，高为180像素

background-size: 50% 30%

背景图片的宽设为容器宽度的50%，高设为容器高度的30%

background-size: cover

把背景段段握图片扩展至足够大，以使背景图片完全覆盖容器区域（背景图片的某些部分也许无法显示在容器区域中）

background-size: contain

把背景图片扩展至最大尺寸，以使其宽度和高度完全适应容器区域（容器的部分边角位置可能会留空）

需要注意的是，background-size是css3的属性，浏览器必须支持css3才能看到预期的效果。好在现在的主流浏览燃御器都是支持css3的（如果你坚持用IE6那当我没说）

首先，你使用span元素并不是很合理，因为span元素是肢闹行元素，不能够旦饥昌设置宽高

如果一定要使用span元素，需要设置宽高，之后对图片进行处理

将span元素调模扒整为块元素（设置display: block），赋予固定的宽度或百分比

之后为图片设置宽度和高度，宽设置为100%，即可让图片等比例进行缩放，宽度等于span的宽度，高度会等比例变化

.box {

    display: block

    width: 200px

}

.box img {

    width: 100%

}

---