如何在HTML中用CSS对图片进行缩放

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档，在body标签中添加一张图片，给这张图片设置css属性，添加“tansform”缩放属性，属性值为“scaleX(n)”，scaleX(n)指的是对宽度进行缩放，n指的是缩放比例：

2、将transform的属性值改为“scaleY(n)”，scaleY(n)指的是对高度进行缩放，n指的是缩放比例：

3、将transform的属性值改为“scale(n)”，scale(n)指的是对图片的宽度和高度同时进行等比例缩放，n指的是缩放比例：

1)背景图片插入:background-image:url(位置及名称) //默认在父级元素内的左上角

2)背景平铺方式:background-repeat:no-repeat //不平铺

3)背景位置:background-position:right bottom //横向在右边，纵向在下边，即右下角

center center //位于中心

center right //中间靠右

100px 200px //靠左100 靠上200

4)背景尺寸:background-size:cover/contain/100% 100% 等比例缩放(铺满即可)/包含在里面/按盒子大小缩放

注意:低版本的IE不支持背景尺寸

5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域，注意:此时的位置是相对于可视区域的

　 (fixed:这里有一个兼容性性的问题，在IE6中，只有html和body支持这个属性)

6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!

解决方法: display:inline//变为行内元素即可

css中的vertical-align属性设置元素的垂直对齐方式，可能的值：

baseline默认。元素放置在父元素的基线上。

sub垂直对齐文本的下标。

super垂直对齐文本的上标

top把元素的顶端与行中最高元素的顶端对齐

text-top把元素的顶端与父元素字体的顶端对齐

middle把此元素放置在父元素的中部。

bottom把元素的顶端与行中最低的元素的顶端对齐。

text-bottom把元素的底端与父元素字体的底端对齐。

%使用"line-height"属性的百分比值来排列此元素。允许使用负值。

inherit规定应该从父元素继承vertical-align属性的值。

---