一、介绍
当在HTML文档中引入图像时，图像默认是根据文本流自动排版的。不过，对于许多网站来说，图像定位需要更多的灵活性，这时就可以使用CSS对图像进行定位。
本文将介绍如何使用CSS定位图像在HTML文档中，以及如何利用CSS属性来更好地控制图像的位置、大小和变形。
二、CSS定位图像在HTML中
CSS定位图像的方法有多种，其中比较常用的是position属性和background-image属性。
1、position属性
position属性用于指定元素的定位方式，一般来说，常用的值有static、relative、absolute和fixed。其中，relative和absolute属性值常用于实现定位效果。
img {
position: relative;
left: 50px;
top: -20px;
}
可以通过以上代码示例对<img>元素使用了position: relative属性来使该元素相对于其正常位置进行定位，然后使用top和left属性来指定元素向上或向下或向左或向右移动的像素距离，使其达到理想的定位效果。
2、background-image属性
除了使用<img>标签来引入图像外，还可以使用CSS的background-image属性将图像作为元素的背景。这种方式相对于使用<img>标签的优点在于可以更好地控制图像的位置和大小。
div {
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
以上代码示例使用了url('image.jpg')来引入指定的图像，center属性值来使该图像在元素的中心位置，no-repeat属性值来防止图像发生重复，50%的background-size属性值实现了让图像的大小为元素的一半。这样实现了一个将图片居中放置并设置了图片的大小的框架。
三、CSS属性控制图像位置、大小和变形
1、控制图像大小
控制图像的大小通常使用width和height属性，需要注意的是，改变图像的大小有可能会导致图像的质量下降。
img {
width: 50%;
height: auto;
}
以上代码示例使用width: 50%将元素的宽度设置为其包含块的一半并使元素高度保持其纵横比的不变性。这样实现了图像的大小被变成了宽度的一半。
2、控制图像位置
最简单的控制图像位置的方式是使用margin属性，通过上下左右的值来设置元素的外边距，从而达到移动元素的效果。但需要注意的是，如果margin值为负数，则元素会向相反的方向移动。
img {
margin: 20px;
}
以上代码示例将元素的外边距设置为20像素，这样就实现了让元素在上下左右都有20像素的空白边距的效果。
3、控制图像变形
通过使用transform属性可以实现对元素进行旋转、缩放和斜切等多种变形效果。
img {
transform: rotate(45deg) scale(1.5, 1);
}
以上代码示例给元素应用了旋转和缩放变形效果。调用rotate()来实现了将元素逆时针旋转45度，然后使用scale()将元素水平方向放大1.5倍，垂直方向保持不变的效果。
四、总结
通过本文的介绍，我们学习了如何使用CSS对图像在HTML文档中进行定位，以及如何利用CSS属性来更好地控制图像的位置、大小和变形等效果。预计今后，再遇到类似图像定位的问题时，我们都能够游刃有余地通过CSS来实现。
