今天我们分享关于图片样式的内容。
在css中，对于图片的大小，我们使用width和height两个属性来定义。
语法：
width:像素值；height:像素值；
示例代码：
<html><head><title>图片大小</title><style type="text/css">img { width:100px;height:80px;}</style></head><body><img src="images/1.jpg" alt=""></body></html>
图片的实际大小与设置大小不是正相关的，也就是图片在Photoshop中的宽度高度，在设定网页宽度高度时，可以参考，但是不用严格遵守，我们设置图片的宽度和高度，目标是为了让图片在网页中呈现出想要的效果。
图片边框border：
语法：
border-width:像素值；border-style:属性值；border-color:颜色值；
这个边框和元素边框是一样的，比较常用的是简洁写法。
示例代码：
<html><head><title>图片边框</title><style type="text/css">img{width:100px;height:80px;border-width:1px;border-style:solid;border-color:red;}</style></head><body><img src="images/1.jpg" alt=""></body></html>
如果我们在图片的边框上加hover的效果，
<html><head><title>加hover</title><style type="text/css">img{width:100px;height:80px;border:1px solid blue;}img:hover { border:1px solid green;}</style></head><body><img src="images/1.jpg" alt=""></body></html>
图片水平对齐：
在文本中需要水平对齐时，使用text-align属性，在图片的水平对齐，也可以使用text-align，一样的效果。
语法：
text-align:属性值；
| text-align属性取值 | |
| 属性值 | 说明 |
| left | 左对齐，默认值 |
| center | 居中对齐 |
| right | 右对齐 |
示例代码：
<html><head><title>图片水平对齐</title><style type="text/css">div{width:600px;height:100px;border: 1px solid black;margin-bottom:20px;}img { width:80px;height:50px;}#d1 { text-align:right;}#d2 { text-align:center;}#d3 { text-align:left;}</style></head><body><div id="d1"><img src="images/1.jpg" alt=""></div><div id="d2"><img src="images/1.jpg" alt=""></div><div id="d3"><img src="images/1.jpg" alt=""></div></body></html>
以上代码就是图片的水平对齐方式，很多初学者会有疑问，认为定义图片的水平对齐，肯定是针对img标签来设置的，其实呢，是需要对图片所在的父元素进行水平对齐的。
图片垂直对齐：
如果我想要图片能够垂直对齐，应该怎么做呢？在css中，我们可以使用vertical-align属性来定义垂直对齐方式的。
语法：
vertical-align:属性值；
| vertical-align属性取值 | |
| 属性值 | 说明 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
示例代码：
<html><head><title>垂直对齐方式</title><style type="text/css">#dv1{width:600px;height:600px;border:1px solid black;text-align:center;}img { width:80px;height:80px;}#img1 { vertical-align:top;}#img2 { vertical-align:middle;}#img3 { vertical-align:bottom;}#img4 { vertical-align:baseline;}</style></head><body><div id="dv1"><img id="img1" src="images/1.jpg" alt="">方式：top<hr><img id="img2" src="images/1.jpg" alt="">方式：middle<hr><img id="img3" src="images/1.jpg" alt="">方式：bottom<hr><img id="img4" src="images/1.jpg" alt="">方式：baseline<hr></div></body></html>
预览浏览器效果后，大家有疑问了，不是说图片对齐方式吗？没看到图片垂直对齐改变啊。这个就是误解了vertical-align属性的含义了。
它负责定义的是行内元素相对于该元素的垂直对齐方式。也就是上面代码中图片与文字的对齐方式。这个大家自己理解一下，消化一下。
2252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
